css的2D和3D

没错，其实你看到的页面可以想象成一个空间，以左上角为原点，可以建立一个直角坐标系

先弄一个基础的样式

<div class="out">
  <div class="in"></div>
  <div class="twoIn"></div>
</div>

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
}

平移

第一个就是沿不同的轴平移，先看基础样式

X轴：translateX()

Y轴：translateY()

Z轴：translateZ()

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
   transform: translateX(100px);/*可以是距离，也可以是百分比，z轴由于没用3d效果，所以看不出什么，也不能用百分比*/
}

简写

translate(x,y)

translate3d(x,y,z)

旋转

沿着不同轴旋转

X轴：rotateX()

Y轴：rotateY()

Z轴：rotateZ()

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
   transform: rotateZ(50deg);/*50deg是50度，由于是空间内变化，xy轴感觉就是高宽变短了*/
}

简写

rotate(z)：z轴旋转

rotate3d(x,y,z，角度):前面三个数字表示向量，最后表示沿着向量转动的角度

缩放

沿着不同轴缩放

X轴：scaleX()

Y轴：scaleY()

Z轴：scaleZ()

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
   transform: scaleX(2);
   /*2就是原来的两倍，0.5就是原来的一半，z轴由于没用3d效果，所以看不出什么*/
}

简写

scale():xy轴一起

scale3d(x,y,z)

倾斜

让盒子沿着不同轴倾斜

X轴：skewX()

Y轴：skewY()

.out{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transform: skewX(20deg);
}

简写

skew(x,y)

旋转的基点

之前无论怎么转动都是沿着中间或者中心点变的，但有时候我们要转动的位置不是这样

transform-origin：x轴位置 y轴位置 z轴位置

x轴位置 ：left / rigth / center / 长度 / 百分比

y轴位置 ：left / rigth / center / 长度 / 百分比

z轴位置 ：长度

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
   transform: rotate(45deg);
   transform-origin: 0 0;
    /*沿着左上角转动*/
}

3d效果

perspective()相当于站多远看

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
   transform: perspective(1000px) rotateY(45deg);
    /*也可以单独作为一个声明，加在父元素上*/
}

是不是有3d的效果了

transform-style

让父元素的子元素也有3d效果

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
   transform: perspective(1000px) rotateY(45deg);
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transform: translateZ(-90px);
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
}

.out{
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid black;
   transform-style: preserve-3d;
    /*子元素有3d效果*/
   transform: perspective(1000px) rotateY(45deg);
}
.in{
   width: 100px;
   height: 100px;
   background-color: pink;
   transform: translateZ(-90px);
}

.twoIn{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: yellow;
}