大佬教程收集整理的这篇文章主要介绍了使用ONLY CSS创建旋转立方体，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<div id="container">
<div id="imasters-cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
我粘贴了一张图片,以便您可以看到我需要的结果：
http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a
到目前为止,我使用absoluted定位元素来创建6个面,但我不知道如何使用CSS进行旋转.请不要JS！
非常感谢
从例2中拉出：
.spinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: rgba(255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0.2);
text-align: center;
line-height: 120px;
font-size: 100px;
}
.spinner .face1 {
-webkit-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
.spinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.spinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
.spinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
.spinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}
.spinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
.spinner {
-webkit-animation: spincube 12s ease-in-out infinite;
animation: spincube 12s ease-in-out infinite;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
@-webkit-keyframes spincube {
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}
@keyframes spincube {
16% { -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); }
33% { -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); }
50% { -ms-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); }
66% { -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); }
83% { -ms-transform: rotateX(90deg); transform: rotateX(90deg); }
}
<div id="stage" style="width: 120px; height: 120px;">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6">6</div>
</div>
</div>
以上是大佬教程为你收集整理的使用ONLY CSS创建旋转立方体全部内容，希望文章能够帮你解决使用ONLY CSS创建旋转立方体所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。