本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
属性
perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上
perspective-origin: 设置透视点的位置
transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d
一、写一个简单的立方体
1.一个长方体有6个面，我们写6个div，并用一个父元素包裹起来。
1 2 3 4 5 6
2.给.mofang设置宽高，并给他设置视距和透视点位置，preserve-3d属性保留子元素3d转换
.mofang{ width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); perspective: 3000px; perspective-origin:-100% -150%; transform-style: preserve-3d;}注：视距越小图形越大，反之越小
3.子元素全部绝对定位
.box{ width: 100px; height: 100px; text-align: center; line-height: 100px; font-size: 20px; font-weight: bold; border: 2px solid black; position: absolute; }4.开始调整6个子元素的位置
.mian1{ background: rgba(255, 255, 0, 0.3); transform: translateY(50px) rotateX(90deg);}学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）效果图如下：
5.一个面写好之后，将其余的面都调整好
/*后*/.mian1{ transform: translateZ(-50px);}/*上*/.mian2{ transform: translateY(-50px) rotateX(90deg);}/*左*/.mian3{ transform: translateX(-50px) rotateY(90deg);}/*前*/.mian4{ transform: translateZ(50px);}/*右*/.mian5{ transform: translateX(50px) rotateY(90deg);}/*下*/.mian6{ transform: translateY(50px) rotateX(90deg);}效果图如下：
css3D动画可以实现很多效果
下面是我写的一些3D动画效果
demo01
html
学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9
css
魔方效果
demo02
html
1 2 3 4 5 6 7 8 9 10 11 12
css
学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
多重立体图
demo03
html
学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 1 2 3 4 5 6 7 8 9 10 11 12
css
圆柱效果
demo04
html
学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
css
齿轮效果
希望本文对大家有所帮助，学习前端更重要的还是理解原理，希望大家也有更多的创新，加油。
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.sosokankan.com/article/1795471.html