变换是缩放、位移、旋转、透视、斜切等的总称。

  • 仅适用于块级元素
  • 可以一次应用多次变换，但顺序不同，效果可能不同
  • transform 和裁剪相关样式（如 clip，clip-path）同时存在时，会先裁剪，再变换。
  • 如果父元素设置了 transform 变换，则子元素的固定定位 position:fixed 效果就会失效，样式表现就会类似于绝对定位。解决方法是使用嵌套——外层元素负责固定定位，内层元素负责实现动画。
  • 默认情况下，父元素的overflow: hidden;对绝对定位的子元素无效，但若父元素的transform不为none，则将生效。
  • transform属性值不为none的元素也可以作为绝对定位元素的包含块。
  • 父元素添加transform后，子元素也会transform，若想消除父元素的transform对子元素的影响，需将子元素的transform设置为none，或子元素上添加相反的transform

【常用】位移 translate()

transform: translate(水平位移, 垂直位移);
  • 1.
  • 参数为百分比时，相对于自身移动
  • 正值：向右，向下，向高层
  • 负值：向左，向上，向低层
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
  • 1.
  • 2.
  • 3.

【实战】水平垂直居中

.dialog {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

但绝对定位的元素，推荐用margin完成偏移，预留出transform来实现动画。

缩放/翻转 scale()

缩放

参数为正值时为缩放

transform: scale(水平方向的缩放倍数, 垂直方向的缩放倍数)
  • 1.

如果只写一个值就是等比例缩放

大于1表示放大，小于1表示缩小，不能为百分比

transform: scale(2, 0.5);  // 0.5可简写为 .5
  • 1.

翻转缩放

参数为负值时会翻转后缩放

水平翻转

transform:scaleX(-1)
  • 1.

垂直翻转

transform:scaleY(-1)
  • 1.

背面可见 backface-visibility

  • backface-visibility: visible; 【默认值】元素翻转时背面可见，表现为元素的镜像
  • backface-visibility: hidden; 元素翻转时背面不可见

效果见  https://demo.cssworld.cn/new/5/2-5.php

旋转 rotate()

正值为顺时针旋转，负值为逆时针旋转，360度一个轮回

  • transform: rotateX(360deg); //绕 X 轴旋转360度
  • transform: rotateY(360deg); //绕 Y 轴旋转360度
  • transform: rotateZ(360deg); //绕 Z 轴旋转360度

以下值都是表示顺时针旋转45度

transform: rotate(45deg);
transform: rotate(50gads);
transform: rotate(0.7854rad);
transform: rotate(.25turn);
  • 1.
  • 2.
  • 3.
  • 4.

一般只需要使用 deg 单位

CSS 的角度单位

单位

含义

deg

degrees, 角度 0-360 正值顺时针，负值逆时针

grad

grads, 百分度，相对于1/400个整圆进行换算，如100gads相当于90deg，正值顺时针，负值逆时针

rad

radians, 弧度，1弧度 = 180/π度，约等于57.3度。

turn

turns, 圈数，1圈=360度

三维旋转 rotate3d()

rotate3d(x, y, z, angle)
  • 1.
transform:rotate3d(1, 1, 1, 45deg);
  • 1.

表示元素绕着坐标(0,0,0)和坐标(1,1,1)连成的向量线旋转45度

斜切skew()

180度是一个轮回。

元素处于90度或者270度斜切的时候是看不见的，因为此时元素的尺寸在理论上是无限的。对浏览器而言，尺寸不可能是无限的，因为没办法表现出来！于是这种情况下的尺寸为0，所以元素在90度或者270度斜切的时候是不会影响祖先元素的滚动状态的。
  • 1.
/* 水平切斜10度，垂直切斜20度 */
transform: skew(10deg, 20deg);
/* 水平切斜10度 */
transform: skewX(10deg);
/* 垂直切斜20度 */
transform: skewY(20deg);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

只有一个参数时，为水平斜切，即skew(10deg)同skew(10deg,0)同skewX(10deg)。

【实战】箭头步骤条/导航


CSS【详解】变换 transform（含位移 translate，缩放/翻转 scale，旋转 rotate，CSS 的角度单位，斜切skew，透视 perspective，变换类型和原点等）_属性值

透视 perspective

有两种写法：

  • 作为一个属性，设置给父元素，作用于所有3D转换的子元素
.stage {
    perspective: 600px;
}
.box {
    transform: rotateY(45deg);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 作为 transform 属性的一个值，作用于元素自身。
.stage .box {
    transform: perspective(600px) rotateY(45deg);
}
  • 1.
  • 2.
  • 3.

两种写法的效果区别详见链接

 https://demo.cssworld.cn/new/5/2-3.php

translateZ()的值与perspective的值相等时，元素将占满整个屏幕，详见链接，帮你理解透视原理。

 https://demo.cssworld.cn/new/5/2-1.php

perspective-origin

表示我们的眼睛相对3D变换元素的位置，可以用于改变元素的3D渲染效果。

perspective-origin: <position>;
  • 1.
perspective-origin: top left;
perspective-origin: right 20px bottom 40%;
perspective-origin: 50% 50%;
perspective-origin: -200% 200%;
perspective-origin: 20cm 100ch;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

perspective-origin属性初始值是50% 50%，表示默认的透视点是舞台或元素的中心。若需要让透视角度偏上或者偏下，便可以通过设置perspective-origin属性值实现。

变换类型 transform-style

只能用于3D变换元素的父元素上

/* 让 子盒子 位于三维空间里 */
  transform-style: preserve-3d;
  • 1.
  • 2.
/* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
  transform-style: flat;
  • 1.
  • 2.

区别详见链接效果  https://demo.cssworld.cn/new/5/2-4.php

变换原点 transform-origin

transform-origin属性可以用来改变元素变换的中心坐标点，共三个参数，分别是x轴，y轴和z轴的变换中心点

  • z 轴只能是数值。
  • x 轴和 y 轴支持百分比值、数值和关键字属性值（left | center | right | top | bottom）。
  • 关键字属性值自带方位，因此 y 轴关键字写在前面也是合法的
transform-origin: bottom center;
/* 可以写作, center可省略*/
transform-origin: bottom;
  • 1.
  • 2.
  • 3.
transform-origin: 20px; 
/* 等同于，50%可省略 */
transform-origin: 20px 50%;
  • 1.
  • 2.
  • 3.

使用场景：

（1）模拟现实世界物体的运动。例如，我以前做项目的时候实现过蜡烛火焰摆动的效果，该效果需要设置火焰元素的transform-origin属性值为bottom，这样火焰摆动的时候才自然。又如实现钟摆运动的动画效果，需要设置transform-origin属性值为top，这样钟摆顶部就会固定，下方会摆动。

（2）布局与定位。例如，在Chrome浏览器中想要实现10px大小的字符，可以先设置12px大小的字符，然后缩放一下：

.text {
    transform: scale(0.83333);
}
  • 1.
  • 2.
  • 3.

但是这样做有一个问题，transform变换的时候元素的原始位置是保留的，这会导致元素缩小后原本设定的间距变大，此时可以使用transform-origin属性优化一下。

/* 如果元素是左对齐的 */
transform-origin: left; 
/* 如果元素是右对齐的 */
transform-origin: right;
  • 1.
  • 2.
  • 3.
  • 4.