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

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

成都创新互联公司是一家集成都网站建设、网站设计、网站页面设计、网站优化SEO优化为一体的专业网站建设公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

属性

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动画特效”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前名称：怎么用css实现3d动画特效
分享地址：http://cdxtjz.cn/article/ppjgpi.html