<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) {
/* transform: rotateX(-90deg) translateY(200px); */
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都是相同的旋转平移变化,后面都是图片背景以及背景定位的代码。