<style>
.box {
width: 300px;
height: 200px;
border: 1px solid rebeccapurple;
margin: 400px auto;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 60px;
height: 200px;
background-color: royalblue;
float: left;
}
ul {
width: 60px;
height: 200px;
background-color: red;
transform-style: preserve-3d;
position: relative;
transform-origin: center center -100px;
}
ul li {
width: 100%;
height: 100%;
position: absolute;
background-color: rosybrown;
}
ul li:nth-child(1) {
top: -200px;
transform-origin: bottom;
transform: rotateX(90deg);
background-image: url('images/01.jpg');
}
ul li:nth-child(2) {
transform: rotateX(180deg) translateZ(200px);
background-image: url('images/02.jpg');
}
ul li:nth-child(3) {
transform-origin: bottom;
transform: rotateX(-90deg) translateY(200px);
background-image: url('images/03.jpg');
}
ul li:nth-child(4) {
background-image: url('images/04.jpg');
}
html:hover .ul1 {
transition: all 3s;
transform: rotateX(-360deg);
}
html:hover .ul2 {
transition: all 3s 0.2s;
transform: rotateX(-360deg);
}
html:hover .ul3 {
transition: all 3s 0.4s;
transform: rotateX(-360deg);
}
html:hover .ul4 {
transition: all 3s 0.6s;
transform: rotateX(-360deg);
}
html:hover .ul5 {
transition: all 3s 0.8s;
transform: rotateX(-360deg);
}
.ul2 li {
background-position: -60px 0px;
}
.ul3 li {
background-position: -120px 0px;
}
.ul4 li {
background-position: -180px 0px;
}
.ul5 li {
background-position: -240px 0px;
}
</style>
<body>
<div class="box">
<ul class="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="ul2">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="ul3">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="ul4">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="ul5">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
图片资源文件可以自定义。 使用CSS3做出来的一个旋转盒子的代码。 所使用的CSS3中的知识点： 1、transform-style: preserve-3d; 将盒子设置成3D显示 2、transform-origin: center center -100px; 设置变化的开始位置 3、transform: rotateX(90deg); 设置盒子的旋转角度，这里有三个方向，xyz轴 4、立体坐标系 原点在盒子的中点，x轴右边为正方向，y轴上面为正方向，z轴面向自己为正方向 5、perspective: 800px; 设置视距，用于让图形显示得更立体 代码解析： 先看html结构，一个盒子中包含5和ul，ul中有4个li，这里5个ul用来将我们的立体盒子分成5份，4个li分别表示每一份的4个面。 css部分：设置盒子的宽高，为图片的宽高，将盒子放入页面的中心，然后修改ul的默认列表样式，以及自带的内边距和外边距，我们将盒子分成5份，所以这里的宽为60px，高度不变，设置一个背景颜色方便我们查看，后期可以删掉，让ul左浮动显示，所以ul就并排了，将ul设置成3D显示，以及相对定位，然后我们将ul中的li设置成绝对定位，分别设置4个li的变化位置，这里的变化包含平移，旋转，最后组成一个正方体的纵向的4个面，由于每一个ul的li都是相同的旋转平移变化，后面都是图片背景以及背景定位的代码。
