这篇文章介绍css实现3d立方体旋转特效的示例代码
先来看运行后出来的效果
它是在不停运行的一个立方体
立即学习“前端免费学习笔记（深入）”；
先来看html部分的代码
再来看它们的样式表
.rect-wrap { position: relative; perspective: 1600px;}.container { width: 800px; height: 800px; transform-style: preserve-3d; transform-origin: 50% 50% 200px; /*设置3d空间的原点在平面中心再向Z轴移动200px的位置*/}.slide { width: 400px; height: 400px; position: absolute; //定位}.top { left: 200px; top: -200px; transform: rotateX(-90deg); transform-origin: bottom; background-color:#C69}.bottom { left: 200px; bottom: -200px; transform: rotateX(90deg); transform-origin: top; background-color:#6FF}.left { left: -200px; top: 200px; transform: rotateY(90deg); transform-origin: right; background-color:#9F0}.right { left: 600px; top: 200px; transform: rotateY(-90deg); transform-origin: left; background-color:#33F}.front { left: 200px; top: 200px; transform: translateZ(400px); background-color:#366 /*立方体前面正对着屏幕，所以不用旋转，只需向Z轴前移动距离*/ }.back { left: 200px; top: 200px; transform: translateZ(0); background-color:#09F /*立方体后面正对着屏幕，所以不用旋转，只需向Z轴后移动距离*/}@keyframes rotate-frame { 0% { transform: rotateX(0deg) rotateY(0deg); } 10% { transform: rotateX(0deg) rotateY(180deg); } 20% { transform: rotateX(-180deg) rotateY(180deg); } 30% { transform: rotateX(-360deg) rotateY(180deg); } 40% { transform: rotateX(-360deg) rotateY(360deg); } 50% { transform: rotateX(-180deg) rotateY(360deg); } 60% { transform: rotateX(90deg) rotateY(180deg); } 70% { transform: rotateX(0) rotateY(180deg); } 80% { transform: rotateX(90deg) rotateY(90deg); } 90% { transform: rotateX(90deg) rotateY(0); } 100% { transform: rotateX(0) rotateY(0); }}.container{ animation: rotate-frame 30s linear infinite;}
代码只有这些便可以实现3D旋转了
也可以变成图片的，可以这样做
在每个p里都加上图片，然后给每个图片设置成统一名字，再给他们统一样式，设置高和宽就好了
可以粘贴复制代码，都来试试吧
相关文章：
简单做出HTML5翻页效果文字特效
CSS比较常用的翻转特效
详细介绍HTML5 3D衣服摇摆动画特效如何实现
以上就是css实现3D立方体旋转特效的示例代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607826.html
微信扫一扫 
支付宝扫一扫 
