这篇文章介绍css实现3d立方体旋转特效的示例代码
先来看运行后出来的效果
它是在不停运行的一个立方体
先来看html部分的代码
<p class="rect-wrap"> <!--舞台元素，设置perspective，让其子元素获得透视效果。-->
<p class="container"> <!-- 容器，设置transform-style: preserve-3d，让其子元素在3d空间呈现-->
<p class="top slide"></p> <!--立方体的六个面-->
<p class="bottom slide"></p>
<p class="left slide"></p>
<p class="right slide"></p>
<p class="front slide"></p>
<p class="back slide"></p>
</p>
</p>
先建出来六个p然后再依次给它们设置样式
再来看它们的样式表
<style type="text/css">
.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;
}
</style>
代码只有这些便可以实现3d旋转了
也可以变成图片的，可以这样做
在每个p里都加上图片，然后给每个图片设置成统一名字，再给他们统一样式，设置高和宽就好了
可以粘贴复制代码，都来试试吧
相关文章：
简单做出html5翻页效果文字特效
css比较常用的翻转特效
详细介绍html5 3d衣服摇摆动画特效如何实现
以上就是css实现3d立方体旋转特效的示例代码的详细内容。