本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
首先让我们来看一张效果图
1.1.1
属性
perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上
perspective-origin: 设置透视点的位置
立即学习“前端免费学习笔记（深入）”；
transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d
1.1.1思路
（1）有三个p，一起放到一个盒子里面。
（2）为其盒子设置样式
.cube{ width: 200px; height: 300px; transform-style: preserve-3d; margin:100px auto; position: relative; transform: rotateX(30deg); border-radius: 50%; padding: 60px; }(3)为其每个p设置样式
.mian{ width: 200px; height: 300px; background-image: url(1.jpg); background-position:400px 0; position: absolute; background: url(aka.jpg); border: 1px solid #ccc; transition: 2s; } .mian1{ transform-origin: right; transform: translateX(-200px) rotateY(45deg); background-position:0 0; } .mian2{ background-position: 400px 0; } .mian3{ transform-origin: left; transform: translateX(200px) rotateY(45deg); background-position: 200px 0; }（4）为其设置动画
.mian3:hover{ transform: translateX(200px) rotateY(0deg); } .mian1:hover{ transform: translateX(-200px) rotateY(0deg); }1.1.1源码：
nbsp;html>书页
1.1.2
1.1.2思路：
（1）有五个p，分别放上五个字。
前
端
小
学
生
（2）给box和p总体设置样式
#box{ margin: 100px auto; 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源码：
nbsp;html>动态字
前
端
小
学
生
1.1.3思路不写，只写源码
1.1.3源码：
nbsp;html>3d动画
.ak .sj2{ width: 10px; height: 10px; margin-top:5px; background: #fff; border-radius: 5px;}@keyframes mi{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(720deg) }}@keyframes ol{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(720deg) }}.mian{ width: 240px; height: 240px; border:1px solid #ccc; position: absolute; border-radius: 120px; top:195px; left:575px; animation: af 5s infinite linear;}.mian .ap{ width: 10px; height: 10px; border-radius: 5px; background: #f0f; margin:30px 0 0 30px; }@keyframes af{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(720deg) }}.chen{ width: 160px; height: 160px; border: 1px solid #ccc; position: absolute; border-radius: 80px; top:235px; left:615px; animation: oa 4s infinite linear;}.ze{ width: 10px; height: 10px; border-radius: 5px; background: #0c0; margin: 20px 0 0 15px;}@keyframes oa{ 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;}
