来搭建立方体吧~~
先将6个面做出来:
六个面的立方体,只需要在ul中包裹六个li就可以了
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
给外面盒子加上边框,给立方体的每一个点定位加颜色:
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 50px auto;
}
.box ul{
width: 100px;
height: 100px;
margin: 100px;
position: relative;
}
.box ul li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
position: absolute;
font-size: 26px;
color: white;
}
.box ul li:nth-child(1){
left: 0;
top: 0;
background-color: chartreuse;
}
.box ul li:nth-child(2){
left: -100px;
top: 0;
background-color: brown;
}
.box ul li:nth-child(3){
left: 100px;
top: 0;
background-color: pink;
}
.box ul li:nth-child(4){
left: 0;
top: -100px;
background-color: chocolate;
}
.box ul li:nth-child(5){
left: 0;
top: 100px;
background-color: skyblue;
}
.box ul li:nth-child(6){
left: 0;
top: 0;
}
立方体就是将这六个面进行旋转,然后拼起来的,
我们将面1作为前面,进行旋转,那么将上下左右面旋转过后,这四个面都是朝里的:
面2:沿着右边线往里翻,其实就是将旋转中心设置为右边线,沿着Y轴逆时针旋转90度,(旋转角度的判断)
面3:沿着左边线往里翻,其实就是将旋转中心设置为左边线,沿着Y轴顺时针旋转90度;
面4:沿着下边线往里翻,其实就是将旋转中心设置为下边线,沿着X轴顺时针旋转90度;
面5:沿着上边线往里翻,其实就是将旋转中心设置为上边线,沿着X轴逆时针旋转90度;
面6:沿着Z轴往里走100个像素,就是沿着Z轴移动-100px。
效果:
CSS:
.box ul li:nth-child(1){
left: 0;
top: 0;
background-color: chartreuse;
}
.box ul li:nth-child(2){
left: -100px;
top: 0;
background-color: brown;
transform-origin: right;
transform: rotateY(-90deg);
}
.box ul li:nth-child(3){
left: 100px;
top: 0;
background-color: pink;
transform-origin: left;
transform: rotateY(90deg);
}
.box ul li:nth-child(4){
left: 0;
top: -100px;
background-color: chocolate;
transform-origin: bottom;
transform: rotateX(90deg);
}
.box ul li:nth-child(5){
left: 0;
top: 100px;
background-color: skyblue;
transform-origin: top;
transform: rotateX(-90deg);
}
.box ul li:nth-child(6){
left: 0;
top: 0;
background-color: #678;
transform: translateZ(-100px);
}
此时这六个面已经构成 了一个立方体,但是我们该如何看到呢?
》》1.我们可以给这个立方体加一个“照相机”,照相机将它看到的东西再呈现给我们,
照相机离这个立方体的距离,叫做景深,用perspective: 200px;来设置,200px就是这个距离
》》2,将这个立方体放在3D空间内:transform-style: preserve-3d;
》》3.此时,我们仍然是只能看到一个面的,是因为我们的“照相机”是正对着立方体放置的, 换个位置试试: perspective-origin: top right; 将“照相机”放在右上角,就可以看到了。
CSS:
.box{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 50px auto;
/* 观看基点距离屏幕的z轴的距离 */
perspective: 200px;
/* 观看基点 */
perspective-origin: top right;
}
.box ul{
width: 100px;
height: 100px;
margin: 100px;
position: relative;
/*3D空间*/
transform-style: preserve-3d;
}
效果图:
剩下的就是将立方体动起来了。
沿着Y轴旋转的立方体:效果如下:
鼠标移入框框,3D立方体 沿着y轴旋转
需要设置 旋转方式、旋转时间、旋转基点、
为了美观呢,可以将6个面做一下透明处理,只加opacity的话,后面的面看也可以看到, 这个时候,需要可以加backface-visibility: hidden; 隐藏一下。
.box ul{
width: 100px;
height: 100px;
margin: 100px;
position: relative;
/*3D空间*/
transform-style: preserve-3d;
/* 鼠标移入时的旋转时间 */
transition: 2s;
/* 旋转基点 */
transform-origin: center center -50px;
}
.box ul li{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
position: absolute;
font-size: 26px;
color: white;
/* 每一个li都加一个透明 */
opacity: 0.5;
/* 但是看不到后面的 */
backface-visibility: hidden;
}
.box:hover ul{
/* transform: rotate3d(1,1,1,360deg); */
transform: rotateY(360deg);
}