CSS3非常炫酷的3D动画
nbsp;html>Title *{ margin: 0px; padding: 0px; } ul{ width: 200px; height: 200px; position: relative; margin: 300px auto; /*转换成3D*/ transform-style: preserve-3d; /*动画属性绑定向一个选择器*/ animation: run 3s infinite linear; } li{ list-style: none; width: 200px; height: 200px; /*透明度*/ opacity: 0.5; position: absolute; left: 0px; top: 0px; } li:first-child{ background: #3be637; /*平移动画*/ transform: translateZ(-100px); } li:nth-child(2){ background: red; transform:translateX(-100px) rotateY(90deg); } li:nth-child(3){ background: darkblue; transform:translateY(-100px) rotateX(90deg); } li:nth-child(4){ background:#0d1426; /*缩放动画*/ transform:translateX(100px) rotateY(90deg); } li:nth-child(5){ background: pink; transform:translateY(100px) rotateX(90deg); } li:nth-child(6){ background: peru; /*位移*/ transform: translateZ(100px); } /*关键帧*/ @keyframes run { /*旋转*/ 0%{transform: rotateX(0deg) rotateY(0deg)} 100%{transform: rotateX(180deg) rotateY(180deg)} }
登录后复制 1 2 3 4 5 6
以上就是如何制作一个CSS3非常炫酷的3D动画 的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121961.html
