怎么用css实现3d动画特效

小编给大家分享一下怎么用css实现3d动画特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

　　属性

　　perspective：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

　　perspective-origin:设置透视点的位置

　　transform-style:指定某元素的子元素是位于三维空间内，取值：flat|preserve-3d

　　1.1.1思路

　　（1）有三个p，一起放到一个盒子里面。

　　（2）为其盒子设置样式

　　.cube{

　　width:200px;

　　height:300px;

　　transform-style:preserve-3d;

　　margin:100pxauto;

　　position:relative;

　　transform:rotateX(30deg);

　　border-radius:50%;

　　padding:60px;

　　}

　　(3)为其每个p设置样式

　　.mian{

　　width:200px;

　　height:300px;

　　background-image:url(1.jpg);

　　background-position:400px0;

　　position:absolute;

　　background:url(aka.jpg);

　　border:1pxsolid#ccc;

　　transition:2s;

　　}

　　/*.mian1:hover{

　　transform-origin:right;

　　transform:rotateY(-60deg);

　　}*/

　　.mian1{

　　transform-origin:right;

　　transform:translateX(-200px)rotateY(45deg);

　　background-position:00;

　　}

　　.mian2{

　　background-position:400px0;

　　}

　　.mian3{

　　transform-origin:left;

　　transform:translateX(200px)rotateY(45deg);

　　background-position:200px0;

　　}

　　（4）为其设置动画

　　.mian3:hover{

　　transform:translateX(200px)rotateY(0deg);

　　}

　　.mian1:hover{

　　transform:translateX(-200px)rotateY(0deg);

　　}

　　1.1.1源码：

　　

　　1.1.2

　　2094583391-5b70f66722968_articlex.gif

　　1.1.2思路：

　　（1）有五个p，分别放上五个字。

　　前

　　端

　　小

　　学

　　生

　　（2）给box和p总体设置样式

　　#box{

　　margin:100pxauto;

　　font-size:100px;

　　color:#005aa0;

　　text-align:center;

　　}

　　.ze1,.ze2,.ze3,.ze4,.ze5{

　　display:inline-block;

　　width:90px;

　　height:100%;

　　position:relative;

　　}

　　（3）设置伪元素before和after

　　.ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{

　　content:attr(data);

　　position:absolute;

　　color:#ffffff;

　　top:0;

　　left:2px;

　　transform-origin:left;

　　transition:transform.5s;

　　}

　　.ze1:before{

　　content:"前";

　　}

　　.ze2:before{

　　content:"端";

　　}

　　.ze3:before{

　　content:"小";

　　}

　　.ze4:before{

　　content:"学";

　　}

　　.ze5:before{

　　content:"生";

　　}

　　.ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after{

　　position:absolute;

　　color:#b3b3b3;

　　top:3px;

　　left:10px;

　　z-index:-1;

　　transform-origin:left;

　　transition:transform.5s;

　　}

　　.ze1:after{

　　content:"前";

　　}

　　.ze2:after{

　　content:"端";

　　}

　　.ze3:after{

　　content:"小";

　　}

　　.ze4:after{

　　content:"学";

　　}

　　.ze5:after{

　　content:"生";

　　}

　　（4）为其设置动画

　　.ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{

　　transform:rotateY(-40deg)skewY(10deg);

　　}

　　.ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{

　　transform:rotateY(40deg)skewY(10deg);

　　}

　　1.1.2源码：

　　

　　前

　　端

　　小

　　学

　　生

　　1.1.3思路不写，只写源码

　　1.1.3源码：

　　

　　.ak.sj2{

　　width:10px;

　　height:10px;

　　margin-top:5px;

　　background:#fff;

　　border-radius:5px;

　　}

　　@keyframesmi{

　　0%{

　　transform:rotate(0deg)

　　}

　　100%{

　　transform:rotate(720deg)

　　}

　　}

　　@keyframesol{

　　0%{

　　transform:rotate(0deg)

　　}

　　100%{

　　transform:rotate(720deg)

　　}

　　}

　　.mian{

　　width:240px;

　　height:240px;

　　border:1pxsolid#ccc;

　　position:absolute;

　　border-radius:120px;

　　top:195px;

　　left:575px;

　　animation:af5sinfinitelinear;

　　}

　　.mian.ap{

　　width:10px;

　　height:10px;

　　border-radius:5px;

　　background:#f0f;

　　margin:30px0030px;

　　}

　　@keyframesaf{

　　0%{

　　transform:rotate(0deg)

　　}

　　100%{

　　transform:rotate(720deg)

　　}

　　}

　　.chen{

　　width:160px;

　　height:160px;

　　border:1pxsolid#ccc;

　　position:absolute;

　　border-radius:80px;

　　top:235px;

　　left:615px;

　　animation:oa4sinfinitelinear;

　　}

　　.ze{

　　width:10px;

　　height:10px;

　　border-radius:5px;

　　background:#0c0;

　　margin:20px0015px;

　　}

　　@keyframesoa{

　　0%{

　　transform:rotate(0deg)

　　}

　　100%{

　　transform:rotate(720deg)

　　}

　　}

　　.yu{

　　width:80px;

　　height:80px;

　　background-color:darkorange;

　　border-radius:40px;

　　position:absolute;

　　top:275px;

　　left:655px;

　　opacity:.7;

　　}

以上是"怎么用css实现3d动画特效"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！