核心思路:
将六个平面正方形包裹在一个大的div盒子里面,通过定位将盒子都重叠起来,在设想一下正方体的一个立体感,那怎样就实现将六个正方性围城一个正方体???
1.通过translate平移将五个正方行摆成十字型的样子,那就还有一个是底面的所以得让它向下平移正方形得宽度px(这个面比较特殊)
2.浮在上面得五个正方行中,围绕顶部正方形周围得四个正方形就需要通过
transform-origin设置围绕哪个边旋转,再通过transform: rotate(ndeg)来实现
- 小技巧
其实在用平移得时候正负是一个坐标:eg:上正,下负,左负,右正
那么旋转度数就和三角函数差不多咯:逆时针为负,顺时针为正
你们有没有发现呢?
css代码
*{
margin: 0;
padding: 0;
}
.big{
width: 200px;
height: 200px;
background-color: plum;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
transform-style: preserve-3d;
}
.big:hover{
transform: rotateY(360deg) rotateX(360deg);
transition: all 3s;
}
div{
width: 200px;
height: 200px;
position: absolute;
}
.inner:nth-of-type(1){
background-color: skyblue;
}
.inner:nth-of-type(2){
background-color: red;
transform: translateX(-200px);
transform: rotateY(-90deg);
transform-origin: right;
}
.inner:nth-of-type(3){
background-color: yellow;
transform: translateX(200px);
transform: rotateY(90deg);
transform-origin: left;
}
.inner:nth-of-type(4){
background-color: yellowgreen;
transform: translateY(200px);
transform: rotateX(-90deg);
transform-origin: top;
}
.inner:nth-of-type(5){
background-color: pink;
transform: translateY(-200px);
transform: rotateX(90deg);
transform-origin: bottom;
}
.inner:nth-of-type(6){
background-color: purple;
transform: translateZ(-200px);
}
<div class="big">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
</div>
主要用到的知识栈:
tranform动画
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
-
一.旋转 rotate 用法:transform: rotate(45deg);
共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。 四.移动
-
二.translate 用法:transform: translate(45px) 或者 transform: skew(45px,
150px);
参数表示移动距离,单位px,
一个参数时:表示水平方向的移动距离; 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。 -
三.基准点 transform-origin
在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。用法:transform-origin: 10px 10px;
共两个参数,表示相对左上角原点的距离,单位px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离;
两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。