css实现3D立方体旋转特效的示例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css实现3D立方体旋转特效的示例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2498字，纯文字阅读大概需要4分钟。

内容图文

先来看运行后出来的效果

它是在不停运行的一个立方体

先来看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立方体旋转特效的示例代码的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css实现3D立方体旋转特效的示例代码全部内容，希望文章能够帮你解决css实现3D立方体旋转特效的示例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端