利用CSS实现立方体360度旋转效果实例代码
发布时间：2016-10-18 16:08:08 作者：佚名 
我要评论
我要评论这篇文章通过实例代码给大家介绍了利用CSS实现立方体360度旋转效果的方法，实现后的效果非常炫酷，而且实现的代码非常简单，对大家的理解和学习很有帮助，有需要的朋友们下面来一起看看吧。
静态效果图如下：
示例代码：
复制代码
代码如下:<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* { margin: 0; padding: 0}
ul {list-style: none;}
ul {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transition: all 6s;
/*6秒时间转变*/
transform-style: preserve-3d;
/*放在父盒子内*/
}
ul li {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
li:nth-child(1){
transform: rotateX(0deg) translateZ(100px);
/*translateZ是为了让立方体出现形状*/
background-color: rgba(255, 0, 0, 0.6);
}
li:nth-child(2){
transform: rotateX(-90deg) translateZ(100px);
background-color: rgba( 0, 255,0, 0.6);
}
li:nth-child(3){
transform: rotateX(-180deg) translateZ(100px);
background-color: rgba(0,0,255,0.5);
}
li:nth-child(4){
transform: rotateX(-270deg) translateZ(100px);
background-color: rgba(50,50,25,0.5);
}
li:nth-child(5){
transform: rotateY(-90deg) translateZ(100px);
background-color: rgba(255,0,255,0.5);
}
li:nth-child(6){
transform: rotateY(90deg) translateZ(100px);
background-color: rgba(0,255,255,0.5);
}
ul:hover{
transform :rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<ul>
<li>第1个盒子</li>
<li>第2个盒子</li>
<li>第3个盒子</li>
<li>第4个盒子</li>
<li>第5个盒子</li>
<li>第6个盒子</li>
</ul>
</body>
</html>
总结
以上就是利用CSS实现立方体效果的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
是一段实现了立方体图块可根据鼠标的拖动方向进行旋转的交互式效果代码，纯原生支持鼠标拖动展示，本段代码适应于所有网页使用，有兴趣的朋友们可以前来下载使用2016-08-18
这是一款使用纯css3实现的3D图片立方体旋转动画特效源码。外层图片构成大立方体包裹内层的小图片立方体同步旋转，鼠标滑过立方体可呈现出外层立方体炸开的效果。该动画特效2016-07-21css3 transform及原生js实现鼠标拖动3D立方体旋转
这篇文章主要为大家详细介绍了css3 transform及原生js实现鼠标拖动3D立方体旋转的相关资料，感兴趣的小伙伴们可以参考一下2016-06-20- 这篇文章主要为大家分享了一款利用html5和css3实现的3D立方体旋转效果教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-26
本源码是一款CSS来制作的可互动的360度超炫3D旋转立方体动画特效的代码。用户可以使用鼠标拖动立方体来查看各个面2016-03-04- 这篇文章主要介绍了基于CSS3实现立方体自转效果 的相关资料,需要的朋友可以参考下2016-03-01
CSS3实现3D立方体旋转动画特效是一款纯CSS3制作的3d旋转动画效果2015-01-09
这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件，在页面的两侧，有两个带有立体浮动效果的左右箭头进行图片的切换。其焦点图的图片切换方式是3D效果的，2014-07-10
这是一款视觉效果超炫的采用CSS3实现的3D立方体动画，与以往的立方体动画效果不同的是，这款CSS3立方体动画的几个表面的背景颜色都有渐变的动画效果，并且会伴随着立方体的2014-06-17
一款HTML5动画，立方体会在不同的角度进行扭曲、放大和缩小2014-06-06
最新评论