摘要:前言本篇文章给大家带来的内容是关于实现动画特效的代码实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
前言
本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
属性
perspective :透距离,单位像素(值越小,透视距离越近,效果越明显):设置父元素上
perspective-origin: 设置透视点的位置
transform-style :指定某元素的子元素是位于三维空间内,取值:flat | preserve-3d
一、写一个简单的立方体1.一个长方体有6个面,我们写6个div,并用一个父元素包裹起来。
123456
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); }
效果图如下:
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
123456789123456789123456789123456789123456789123456789css
魔方效果
demo02
html
123456789101112css
多重立体图
demo03
html
123456789101112css
圆柱效果
demo04
html
css
齿轮效果
如果文中有不妥或者错误的地方还望高手的您指出,以免误人子弟。
如果您有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
vx:bsl521921
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114815.html
摘要:超过的星星,是一个动画库,可以处理属性,单个转换,或任何属性以及对象。超过星星,这个动画库大小只有。超过星星,这个库基允许你以选定的速度为字符串创建打字动画。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 1.Three.js showImg(https://segmentfault.com/img/bVbkQ4X?w=551&h=358); 超过46K的星星,...
阅读 1718·2023-04-25 19:37
阅读 1270·2021-11-16 11:45
阅读 2679·2021-10-18 13:30
阅读 2717·2021-09-29 09:34
阅读 1557·2019-08-30 15:55
阅读 3093·2019-08-30 11:10
阅读 1807·2019-08-29 16:52
阅读 975·2019-08-29 13:18