CSS之transform 2D 与 3D 转换（十五）

已进厂(。•́︿•̀。)

已于 2023-04-02 19:47:31 修改

阅读量956

点赞数 4

分类专栏： css web前端文章标签： css 3d css3

于 2022-10-06 22:03:07 首次发布

本文链接：https://blog.csdn.net/twjtwjtwjm/article/details/127188414

版权

web前端同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

css

15 篇文章 5 订阅

订阅专栏

该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项。

1、transform 属性

在 CSS 中，利用 transform 这个属性实现对元素进行旋转，缩放，倾斜或平移；

transform 属性的值可以是 none 或一个或多个 css 变换函数；

transform 的值不是 none 时，元素会创建自己的层叠上下文。

1.1、transform 的 2D 变换函数

属性值	描述	实例
translate(x,y)	x，y 为长度单位,可以是 px，也可以是百分比%， x 表示元素在 x 轴上的移动量 y 表示元素在 y 轴上的移动量，如果 y 值不写，则默认为 0，例如 translate(10px)表示 translate(10px,0)	transform:translate(100px,200px)
translateX(x)	x 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 x 轴上的位移量	transform:translateX(300px)
translateY(y)	y 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 Y 轴上的位移量	transform:translateY(200px)
rotate(ax)	ax 代表旋转的角度正角表示顺时针旋转负角表示逆时针旋转	transform:rotate(30deg)
scaleX(x)	x 数字类型，表示元素在 x 轴上的缩放比	transform:scaleX(2)
scaleY(y)	y 数字类型，表示元素在 y 轴上的缩放比	transform:scaleY(2)
scale(x,y)	x 数字类型，表示元素在 x 轴上的缩放比 y 数字类型，表示元素在 y 轴上的缩放比当只有 x，没有 y 时，则 y 默认为 x，元素在 x，y 轴上均匀缩放	transform:scale(2,3)
skew(ax,ay)	ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度 ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度	transform:skew(30deg,30deg)
skewX(ax)	ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度,形成水平拉伸效果	transform:skewX(30deg)
skewY(ay)	ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度，形成垂直拉伸效果	transform:skewY(30deg)

1.2、transform 的 3D 转换属性值

属性值	描述	实例
translateZ(z)	z 为 px 长度单位元素在 3D 空间 z 轴方向上的位移量	transform:translateZ(200px)
translate3d(x,y,z)	x，y，z 分别为 px 长度单位， x 表示元素在 x 轴坐标上的位移量， y 表示元素在 y 轴坐标上的位移量，z 表示元素在 z 轴坐标上的位移量，该值不能使用百分比，如果使用会被认为是无效属性	transform:translate3d(50px,30px ,50px)
rotateX(ax)	表示元素绕`X`轴旋转一定的角度 ax 表示度数，可以为正，也可以为负	transform:rotateX(30deg);
rotateY(ay)	表示元素绕`Y`轴旋转一定的角度 ay 表示度数，可以为正，也可以为负	transform:rotateY(30deg)
rotateZ(az)	表示元素绕`Z`轴旋转一定的角度 ax 表示度数，可以为正，也可以为负	transform:rotate(30deg);

2、2D 转换

注意：

元素的左上角坐标为（0，0）；
（0，0）坐标的右方，为 x 轴的正方向；
（0，0）坐标的下方，为 y 轴的正方向。

2.1、translate 位移

css 中通过给transform添加translate(x,y)或translateX(x)或translateY(y)来实现元素的水平或垂直位移。

属性值	描述	举例
translate(x,y)	实现元素水平和垂直位移量	translate(30px,50px)
translateX(x)	实现元素水平位移量	translateX(30px)
translateY(y)	实现元素垂直位移量	translateY(50px)

2.1.1、translate(x,y)

x 和 y 是长度值 length，可以是 px，也可以是%百分比；

x 表示元素在 x 轴上的位移量，为正表示向右移动，为负表示向左移动；

y 表示元素在 y 轴上的位移量，为正表示向下移动，为负表示向上移动；

位移和相对定位非常像，位移变形也会 “老家留坑”，即会占据原来的位置；

同时不会对其它元素造成影响，相当于悬浮在其它元素上面。

/* x,y 为px长度单位 */
transform: translate(50px, 50px); /* 元素水平向右移动50px，向下移动50px */

/* x,y 为%百分比 */
/* 在标准盒子模型下：
	水平位移 =（width + 左右 padding + 左右 border) * x%
	垂直位移 =（height + 上下 padding + 上下 border) * y%
*/
transform: translate(50%, 50%);

/* y 值不写，默认为0：
	transform:translate(10px) 等同于 transform:translate(10px,0)
	只有x发生位移，y轴上不发生移动
*/
transform: translate(10px);

2.1.2、translateX(x) 和 translateY(y)

/*
	transform:translate(x) 等同于translateX(x)
	transform 后面如果跟多个变换函数，则各函数之间用空格隔开
	本质上 translate(x,y) 是 translateX 与 translateY 两者的复合写法
*/
transform: translate(x);
transform: translateX(x); /* 实现元素在 X 轴的位移量 */
transform: translateY(y); /* 实现元素在 Y 轴的位移量 */
transform: translateX(x) translateY(y);

2.2、实现元素水平垂直居中

/* 
	先利用绝对定位
	让元素的顶部和左侧分别与父元素垂直和水平中间对齐
	然后再利用translate，让元素向上和向左移动自身宽度的一半
	这样就实现了水平和垂直居中
*/
position: absolute;
top: 50%;
left: 50%;
/* 向左和向上分别移动元素自身宽和高的一半 */
transform: translate(-50%, -50%);

2.3、scale 缩放

css 中通过给transform添加scale(x,y)或scaleX(x)或scaleY(y)来实现元素的宽高缩放效果

2.3.1、scale(x,y)

x，y 都是数字类型，也可以用百分比%表示，分别表示元素的宽和高缩放比；

当 x，y 的值 >1 时，表示放大；<1 时，表示缩小； =1 表示不变；

当只有 x，没有 y 时，则 y 默认为 x，元素宽高同时均匀缩放。

/* 宽放大2倍，高放大3倍 */
transform: scale(2, 3);
/* 宽缩小0.5倍，高放大2倍 */
transform: scale(0.5, 2);
/* 宽高同时放大2倍 */
transform: scale(2);
/* 在标准盒子模型下：
	相对于元素的可视宽和可视高而言
	宽缩放后大小 =（width + 左右 padding + 左右 border)  * x%;
	高缩放后大小 =（height + 上下 padding + 上下 border) * y%;
*/
transform:scale(30%,50%);

2.3.2、scaleX(x) 与 scaleY(y)

/*
	transform:scale(x,y) 同等于 transform:scaleX(x) scaleY(y);
	本质上 scale(x,y)是 scaleX(x) 与 scaleY(y)的复合写法
*/
transform: scaleX(x) scaleY(y);

2.4、skew 斜切

css 中通过给 transform 添加 skew(ax,ay) 或 skewX(ax) 或 skewY(ay) 变换函数来实现元素斜切效果：

skewX(ax)：用于水平拉伸，使元素的每个点在水平方向上扭曲一定角度

skewY(ay)：用于垂直拉伸，使元素的每个点在垂直方向上扭曲一定角度

skew(ax,ay)：用于水平和垂直拉伸，使元素在水平和垂直方向上扭曲一定角度

ax：表示一个角度，用来表示沿着横坐标扭曲元素的角度

ay：表示一个角度，用来表示沿着纵坐标扭曲元素的角度

/* X轴斜切 30deg */
skewX(30deg);
/* Y轴斜切 50deg */
skewY(50deg);
/* X轴斜切 30deg Y轴斜切50deg*/
skew(30deg,50deg)
/* ax和ay可以用负值 */

2.5、rotate 旋转

css 中通过 transform:rotate(ax) 来实现元素旋转效果

ax 表示旋转的角度，比如 rotate(45deg)

ax 为正，表示顺时针方向旋转

ax 为负，表示逆时针方向旋转

  .item1 {
    /* 顺时针旋转到30deg */
    transform: rotate(30deg);
  }
  .item2 {
    /* 逆时针旋转到30deg */
    transform: rotate(-30deg);
  }
  .item3 {
    /* 顺时针旋转到180deg */
    transform: rotate(180deg);
  }
  .item4 {
    /* 顺时针旋转30deg */
    transform: rotate(450deg);
  }

2.6、transform-origin

transform-origin 属性，设置元素的变换原点，即元素在变换时是以围绕哪个点来发生变换的

默认值：transform-origin:50% 50% 0;（元素的中心）

/*
	x： 表示x轴的坐标位置
	y： 表示y轴的坐标位置
	z: 表示z轴的坐标位置 
*/
transform-orign: x y z;
/*  注意：
    x , y 的值，可以是长度值（px 或百分比%）还可以是预设的关键词
    z 的值只能是长度值 px 
*/

2.6.1、关键字表示

关键词（left、right）与（top、bottom) 与 center 三组中任意一个与另一组中的一个关键字组合来表示；

元素的默认变换原点为元素的中间位置 transform-origin:center; 。

关键字	描述
left	原点为元素左边中间位置，同`left center`一样
right	原点为元素右边中间位置，同`right center`一样
top	原点为元素上边中间位置，同`top center`一样
bottom	原点为元素下边中间位置，同`bottom center`一样
center	原点为元素中间位置，同`center center`一样
top left	原点为元素左上角，相当于坐标（0 0）
top right	原点为元素右上角
left bottom	原点为元素左下角
right bottom	原点为元素右下角

2.6.2、数值表示法

/* 
  x , y 为长度单位（px 或百分比%） 
  当 y 省略不写时，默认为元素的垂直中心点 
*/
transform-origin: x y;

/* 变换原点：为左上角 */
transform-origin: 0 0;
/* 变换原点为：x轴20px 与y轴30px相交的位置 */
transform-origin: 20px 50px;
/* 变换原点：为上边的中间点 */
transform-origin: 0;

2.6.3、百分比表示

  .item1 {
    /* 百分比相对的是元素自身的可视宽和可视高而言，旋转的原点 */
    transform-origin: 100%;
  }
  .item2 {
    transform-origin: 50%;
  }
  .item3 {
    transform-origin: 100% 0%;
  }
  .item4 {
    transform-origin: 100% 100%;
  }
  .item5 {
    transform-origin: 100% 50%;
  }

2.6.4、scale 与 skew 都可以设置其变换原点

元素默认的转换原点为元素的中心点：transform-origin:50% 50%;

2.7、2D 转换综合写法顺序问题

/*
同时使用多个转换，其多个转换函数之间用空格隔开；
转换函数的顺序会影响转换的效果，比如：先旋转会影响坐标轴方向；
当我们需要同时位移和旋转时，需要注意位移和旋转的书写顺序，因为先旋转会影响到元素的坐标轴方向。
*/
transform: translate() rotate() scale();

3、3D 转换

元素的左上角坐标为（0，0，0）

x 轴右边为正方向，y 轴的下方为正方向

z 轴垂直电脑屏幕，射向我们的那一头为正方向

3.1、perspective 透视

没有透视定义，不成 3D；

透视是指在平面上描绘物体的空间关系的方法或技术；

要在平面上描绘物体的空间立体感，需要遵顺透视原理中的 近大远小 的规则；

当一个物体离我们越近，我们看到他会比离我们远的时候要大。

视点： CSS3 中 3D transform 的 透视点 (视点) 是在浏览器的前方！

perspective 属性：

在 css3 中，用 perspective 属性来设置透视距，即模拟人站在离屏幕多远的地方来看电脑上显示的元素；

比如 perspective:800px; 意思就是在离屏幕 800px 的地方看到这个元素；

如果元素往 Z 轴正方向 移动，离我们越近，看到物体就越大；

如果元素往 Z 轴负方向 移动，离我们越远，看到的物体就越小；

perspective 这个属性要设置在父元素上面。

3.2、translate 3D 位移

translateX(x) 表示水平方向（x 轴）的位移量，与 2D 位移是一样的效果

translateY(y) 表示垂直方向（y 轴）的位移量，与 2D 位移是一样的效果

translateZ(z) 表示垂直于电脑屏幕方向（z 轴）的位移量

translate3d(x,y,z) 表示元素在 x,y,z 三个坐标上的位移量，用来称动元素在 3D 空间中的位置

3.2.1、translateZ(z)

/* 我们要能看到 3D 的效果，必需要配合`perspective` 属性，`perspective`属性用来定义透视强度。 */
/* 视距为300px  相当于模拟人站在离电脑屏幕300px的位置看这个元素 */
perspective: 300px;

当 perspective 的值为 300px，则 300px 就会成为当下显示效果的基准。在这个基准下：

translateZ=0 图形大小正常显示
0< translateZ<300 图形变大
translateZ>=300 图片不见，相当于图片在你的后面，你肯定是看不见的了
translateZ<0 图形变小

注意：

perspective:300px;时，向前移动100px，离元素还差200px
perspective:900px;时，向前移动100px，离元素还差800px
则perspective:300px时看到的要比perspective:900px时的更大。
其向后移动 100px，则看到的更小，原理类似

3.2.2、translate3d(x,y,z)

表示元素在 x,y,z 三个坐标上的位移量，用来移动元素在 3D 空间中的位置；
z 的值不能使用百分比，如果使用会被认为是无效属性。

3.3、rotate 3D 旋转

css 中通过给 transform 添加下如下变换函数值来实现 3D 旋转效果：

属性值	描述
rotateX(ax)	表示元素绕`X`轴旋转一定的角度 ax 表示度数，可以为正，也可以为负
rotateY(ay)	表示元素绕`Y`轴旋转一定的角度 ay 表示度数，可以为正，也可以为负
rotateZ(az)	表示元素绕`Z`轴旋转一定的角度 ax 表示度数，可以为正，也可以为负

rotateX、rotateY、rotateZ：

  .item1 {
    transform: rotateX(40deg);
  }
  .item2 {
    transform: rotateX(-40deg);
  }
  .item3 {
    transform: rotateY(40deg);
  }
  .item4 {
    transform: rotateY(-40deg);
  }
  .item5 {
    transform: rotateZ(40deg);
  }
  .item6 {
    transform: rotateZ(-40deg);
  }

3.4、transform-style

transform-style 用于设置元素的子元素是位于 3D 空间中还是平面中，其值如下：

值	描述
flat	表示所有子元素在 2D 平面呈现。
preserve-3d	表示所有子元素在 3D 空间中呈现。

4、总结

4.1、变换函数

位移变换函数：translate(x,y)、 translateX(x) 、 translateY(y) 、 translateZ(y)

x,y 的值为单位长度，可以是 px、百分比
z 的值只能为 px 长度单位
translate(x) 同等于 translate(x,0)

缩放变换函数：scale(x,y) 、scaleX(x)、 scaleY()

x,y 的值为数字，分别表示宽度和长度的缩放比例
scale(x) 表示 y 的值和 x 一样大，实现等比缩放

斜切变换函数：skew(ax,ay)、 skewX(ax)、 skewY(ax)

ax、ay 分表示水平和垂直拉升，使元素与 x 轴和 y 轴发生的扭曲角度

旋转变换函数：rotate(ax) 、rotateX() 、 rotateY()、 rotateZ()

rotate 表示 2D 平面旋转，ax 表示旋转度数，为正，表示顺时针旋转，为负，表示逆时针旋转
rotateX( ax ) 、rotateY( ay )、rotateZ( az )表示 3D 旋转,旋转的方向，可以通过左手法则来记忆

4.2、重要属性

perspective 视距：

用来模拟人站在离电脑屏幕多远的距离来看这个元素。
假设 div 的 width:300px;height:300px;perspective:900px; 则表示人站在离屏幕 900px 的位置看现在的 div。看到 div 的大小就是我们设置的 width:300px;和 height:300px;的大小；
当 div 的 translateZ=0 时，看到的元素大小就是 width:300px 和 height:300px ；
当 div 的 0<translateZ<300px 时，看到的元素要比实际大；
当 div 的 translateZ<0 时，看到的元素要比实际的小；
当 div 的 translateZ>300px 时，则看不到元素，因为元素在我们的后面。

transform-style 子元素是否在 3D 空间下呈现：

值描述
flat 表示所有子元素在 2D 平面呈现。
preserve-3d 表示所有子元素在 3D 空间中呈现。

transform-origin:x y z; 设置变换的原点：

默认值为 transform-origin:50% 50% 0;
x y 的值可以是长度单位 px 和百分比% 或预设的关键字