本篇文章给大家带来的内容是关于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:hover{ transform-origin: right; transform: rotateY(-60deg); } */ .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源码：
书页 .container{ width: 1000px; height: 650px; perspective: 2000px; border: 1px solid transparent; overflow: hidden; margin: 0 auto; perspective-origin: 10% 20%; } .cube{ width: 200px; height: 300px; transform-style: preserve-3d; margin:100px auto; position: relative; transform: rotateX(30deg); border-radius: 50%; padding: 60px; } .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:hover{ transform-origin: right; transform: rotateY(-60deg); } */ .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; } .mian3:hover{ transform: translateX(200px) rotateY(0deg); } .mian1:hover{ transform: translateX(-200px) rotateY(0deg); }
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源码：
动态字 #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; } .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: "生"; } .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.3思路不写，只写源码
1.1.3源码：
3d动画 body{ margin: 0; background:url(iom.jpg) ; background-size:100%; position: relative;}.box{ width:430px; height: 430px; position: absolute;; top:100px; left: 480px; border: 1px solid #ccc; border-radius: 215px; text-align: center; animation: dong 20s infinite linear; }.ai{ width:10px; height: 10px; background: #0c0; border-radius: 5px; position: absolute; right:38px; top: 340px;}@keyframes dong{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(720deg) }}.mrin{ width:320px; height: 320px; border:1px solid #ccc; border-radius: 180px; position: absolute; top:155px; left: 535px; animation: mi 15s infinite linear;}.ak{ width:50px; height: 50px; border: 1px solid #ccc; margin: 20px 0 0 20px; border-radius: 25px; display: inline-block; animation: ol 5s infinite linear;}.ak .sj1{ width:10px; height:10px; border-radius: 5px; margin:20px 0 0 20px; background: blue;}.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;}
.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;}
相关推荐：
css3D+动画的例子（附完整代码）
css怎么实现卡片图像翻转效果？（特效示例）
以上就是css实现3d动画特效的代码实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611156.html
微信扫一扫 
支付宝扫一扫 
