第一部分: 前言介绍

说先我们来理解一下 transform 这个单词:

css-transform.png

从以上结论,我们把transform的属性列表一下:

第二部分: 实例展示与扩展

• rotate

transform里rotate能 旋转元素的展示角度
它的值有列表如下:

注: 以上值的 参数单位都为角度值 deg

下面我们来具体举例,详细了解这个属性和作用:
① transform; rotate(number+deg)
对于平面上的旋转, 大家在日常生活中常常看到. 如: 转动的风车,摆动的卡牌...等等.
旋转或是转动 就有两个基本属性: 一 是旋转幅度(角度值); 二 是旋转的方向(逆时针还是顺时针)
我们用实例来得到答案:

设计案例: 给元素四个边设置不同颜色的边框. 通过 浏览器 F12 调整参数的不断变化来观察旋转的规律.

.box {
  margin: 100px;
  width:  80px;
  height: 80px;
  background: red;

/* 给边框设置不同颜色 */
  border-top: 8px solid green;
  border-right: 8px solid cyan;
  border-bottom: 8px solid orange;
  border-left: 8px solid black;
 
 /* 从临界点开始变换参数数值 */
  transform: rotate(0deg) ; 
  
}

效果:

css-rotate1.gif

从上面gif动画, 可以得出:
参数为 正值 的时候, 元素旋转的方向是 顺时针, 当 参数值为 负值 的时候, 旋转的方向是 逆时针.
可以总结为: 正顺负逆

② transform: roteta3d(x,y,z,angle)
但是了解它之前.我们先把 rotateX(angle),rotateY(angle),rotateZ(angle)给弄清楚..
这里的x,y,z 就是 旋转轴:元素旋转所依据的基线, 通常在元素几何上的中心

先看 rotetaX(angle) X为横轴.它的位置在 元素的中线

.rotateX {
  width: 200px;
  height: 200px;
  background: red;
  margin: 200px;
  text-align: center;
  color: #fff;
  
  transform: rotateX(0deg)   /*  从初始值开始变换 */
}

效果

css-rotateX1.gif

同样的案例设计对于: transform: rotateY(angle)
效果

css-rotateY1.gif

再来看 : transform: rotateZ(angle)
效果

css-rotateZ1.gif

如果对于Z轴 指向 还不清楚 可以参看 这张图..

Z轴示意.webp.jpg

经过上面三个小分支. 现在来正式了解下: tranform: rotate3d(x,y,z,angel)
前面的 x,y,z 相当于:

.rotate3d {
  /* 元素围绕x,y,z轴旋转 */
  transform: rotate3d(x,y,z,angle);
  
  /* 元素围绕X轴旋转 */
  transform: rotateX(angle) <==> transform: rotate3d(1,0,0,angle);
  
  /* 元素围绕Y轴旋转 */
  transform: rotateY(angle) <==> transform: rotate3d(0,1,0,angle);
  
  /* 元素围绕Z轴旋转 */
  transform: rotateZ(angle) <==> transform: rotate3d(0,0,1,angle);
}

我们来设计一个案例: 固定x,y,z轴, 让旋转 角度 不断变换. 如下:

.rotate3d {
  width: 200px;
  height: 200px;
  background: red url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580726617712&di=c7dc189da8593862cfdd34b0ebeb4740&imgtype=0&src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd1%2F1410%2F17%2F976a5ae174d3cd67ffffffffc8d65eac.jpeg_r_640x453x70_63758ccb.jpeg) center center no-repeat;
  background-size: 100% 100%;
  margin: 200px;
  color: #fff;
  
  /* 固定常量.控制变量方法 */
  transform: rotate3d(1,1,1,0deg);
}

效果:

css-rotate3d.gif

我们看到图片的旋转,有是 深度 的变化产生. 这就是rotate3d的效果:

• translate

translate定义元素的移动变换.
同样遵循 三维坐标系: x,y,z 轴上的移动

① transform: translate(x,y): 元素沿x,y的偏移量. 偏移单位是像素px
实例:

.begin {
  /* margin: 20px; */
  width: 100px;
  height: 100px;
  background: #ddd;
}
.begin::after {
  content: "移动后的位置";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  background: red;
  
  /* X轴,Y轴各偏移150px */
  transform: translate(150px, 150px);
}

效果:

css-translate.png

transform: translate3d(x,y,z) 单位为px

translate3d 与 rotate3d 一样.
在多了一个Z轴后, 就有了深度 的 位移效果了...
实例:

 <!-- html -->
  <div class="box">
     <div class="translate3d"></div> 
  </div>

/* css */
.box {
   perspective: 500; /* 给父容器一个透视距离,里面的子元素才会有透视效果 */
  -webkit-perspective: 500; 
}
.translate3d {
  margin: 100px 0 0 100px;
  width: 200px;
  height: 200px;
  background-image: url(http://up.enterdesk.com/edpic/60/98/d3/6098d30e8e4b5e18a9bb9166c8c50161.jpg);
  background-size: cover;
  
  transform: rotateY(0deg) translate3d(50px,50px,50px);
}

效果:

css-translate3d.gif

• scale

0<n<1: 缩小. n>1 放大 当为负值的时候.表示反向放大或缩小.

同样 scale 同样 分为 平面和三维 两个维度.

首先来理解下 平面上的 放大缩小:
tranform: scale(x,y);
具体怎么表现呢? 请看下面案例

.begin {
  margin: 200px;
  width:  200px;
  height: 200px;
  background: red;
}
.begin::after {
  content: "变换后的大小";
  width: 200px;
  height: 200px;
  position: absolute;
  left: 200px;
 
  background: green;
  opacity: .5;
  
  /* X轴方向缩小0.5, Y轴方向放大1.5 */
  transform: scale(.5,1.5)
}

效果:

css-scale.png

再来看 tranform: scale3d(x,y,z)
这里的z同样是 指向我们观察者的眼睛的那根 轴..
我们来设计一个实例 来 感受一下:

 <!-- html -->
  <div class="box">
    <div class="scale3d">scale3d</div>
  </div>

/* css */
.box {
  perspective: 500;
  -webkit-perspective: 500;
  margin: 200px;
}
.box .scale3d {
  width: 200px;
  height: 200px;
  background: red;
  
  /* rotateY(45deg) */
  
  transform: rotateY(45deg) scale3d(1,1,2);
   
}

效果

css-scale3d.gif

为什么改变z的数值,没有什么变化呢?!

• skew

transform: skew(angle) 可以 倾斜 元素 x,y轴上的角度

我们先来看第一个: skewX(angle)

.skewX {
  margin: 100px;
  width: 200px;
  height: 200px;
  background: red;
  
  transform: skewX(10deg);
}

效果

css-skewX.png

得出结论: 角度正值时,向逆时针倾斜; 角度为负值时, 向顺时针倾斜. 元素的几何中心点不移动不变化.

在来看: skewY(angle)

.skewY {
  margin: 200px;
  width: 200px;
  height: 200px;
  background: red;
  
  transform: skewY(10deg);
}

效果:

css-skewY.png

再来看, transform: skew(x,y)

.skewXY {
  margin: 200px;
  width: 200px;
  height: 200px;
  background: red;
  
  transform: skew(10deg,10deg);
}

效果:

css-skewXY.png

• perspective

定义: 该属性允许您改变 3D 元素查看 3D 元素的视图.
用法: transform: perspective(number+px), number 值越小.透视效果越明显.
注意:

①: perspective 要放在 transform其他属性的前面.否则不会产生效果.
② 一般加上-webkit-transform ,兼容性更好.

实例:

.perspective {
  margin: 200px;
  width: 200px;
  height: 200px;
  background: red;
  
/* perspective要放在 rotate的前面才会产生效果 */
  transform: perspective(300px) rotateY(40deg);
  -webkit-transform: perspective(300px) rotateY(40deg);
}

效果:

css-transform-perspective.gif