2D变换
前提:二维坐标如下图所示
2D位移
2D
位移可以改变元素的位置,具体使用方式如下:
- 先给元素添加转换属性
transform
- 编写
transform
的具体值,相关可选值如下:
值 | 含义 |
---|---|
translateX | 设置水平方向位移,需指定长度值;若指定的是百分比,是参考自身宽度的百分比。 |
translateY | 设置垂直方向位移,需指定长度值;若指定的是百分比,是参考自身宽度的百分比。 |
translate | 一个值代表水平方向,两个值代表水平和垂直方向。 |
- 注意点:
- 位移与相对定位很相似,都不脱离文档流,不会影响到其他元素。
- 与相对定位的区别:相对定位的百分比值,参考的是其父元素;位移的百分比值,参考的是其自身。
- 浏览器针对位移有优化,与定位相比,浏览器处理位移的效率更高。
transform
可以链式编写,如下:
transform: translateX(30px) translateY(40px);
- 位移对行内元素无效
- 位移配合定位,可实现元素水平垂直居中
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
2D缩放
2D
缩放是指:让元素放大或缩小,具体使用方式如下:
- 先给元素添加转换属性
transform
- 编写
transform
的具体值,相关可选值如下:
值 | 含义 |
---|---|
scaleX | 设置水平方向的缩放比例,值为一个数字,1 表示不缩放,大于1 放大,小于1 缩小。 |
scaleY | 设置垂直方向的缩放比例,值为一个数字,1 表示不缩放,大于1 放大,小于1 缩小。 |
scale | 同时设置水平方向、垂直方向的缩放比例,一个值代表同时设置水平和垂直缩放;两个值分别代表:水平缩放、垂直缩放。 |
- 注意点:
scale
的值,是支持写负数的,但容易让人产生误解- 借助缩放,可以实现小于
12px
的文字
2D旋转
2D
旋转是指:让元素在二维平面内,顺时针旋转或逆时针旋转,具体使用方式如下:
- 先给元素添加转换属性
transform
- 编写
transform
的具体值,相关可选值如下:
值 | 含义 |
---|---|
rotate | 设置旋转角度,需指定一个角度值(deg ),正值顺时针,负值逆时针。 |
**注意:rotateZ(20deg)
相当于rotate(20deg)
。
2D扭曲
2D
扭曲是指:让元素在二维平面内被”拉扯“,进而”走形“,具体使用方式如下:
- 先给元素添加转换属性
transform
- 编写
transform
的具体值,相关可选值如下:
值 | 含义 |
---|---|
skewX | 设置元素在水平方向扭曲,值为角度值,会将元素的左上角、右下角拉扯 。 |
skewY | 设置元素在垂直方向扭曲,值为角度值,会将元素的左上角、右下角拉扯 。 |
skew | 一个值代表shewX ,两个值分别代表:shewX 、shewY |
多重变换
多个变换,可以同时使用一个transform
来编写。
transform: translate(-50%, -50%) rotate(45deg);
注意点:多重变换时,建议最后旋转。
变换原点
- 元素变换时,默认的原点是元素的中心,使用
transform-origin
可以设置变换的原点。 - 修改变换原点对位移没有影响,对旋转和缩放会产生影响。
- 如果提供两个值,第一个用于横坐标,第二个用于纵坐标。
- 如果只提供一个,若是像素值,表示横坐标,纵坐标取
50%
;若是关键词,则另一个坐标取50%
1. transform-origin: 50% 50% , 变换原点在元素的中心位置,百分比是相对于自 身。—— 默认值
2. transform-origin: left top ,变换原点在元素的左上角 。
3. transform-origin: 50px 50px , 变换原点距离元素左上角 50px 50px 的位置。
4. transform-origin: 0 ,只写一个值的时候,第二个值默认为 50% 。
3D变换
开启3D空间
重要原则:元素进行3D
变换的首要操作:父元素必须开启3D
空间!
使用transform-style
开启3D
空间,可选值如下:
flat
:让子元素位于此元素的二维平面内(2D
空间)—默认值preserve-3d
:让子元素位于此元素的三维空间内(3D
空间)
设置景深(有了透视效果,近大远小)
何为景深?—指定观察者与z=0
平面的距离,能让发生3D
变换的元素,产生透视效果,看来更加立体。
使用perspective
设置景深,可选值如下:
none
:不指定透视 —(默认值)长度值
:指定观察者距离z=0
平面的距离,不允许负值。
注意:persective
设置给发生3D
变换元素的父元素!
透视点位置
所谓透视点位置,就是观察者位置;默认的透视点在元素的中心。
使用perspective-origin
设置观察者位置(透视点的位置),例如:
/* 相对坐标轴往右偏移400px, 往下偏移300px(相当于人蹲下300像素,然后向右移动400像素看元素)*/
perspective-origin: 400px 300px;
注意:通常情况下,不需要调整透视点位置。
3D位移
3D
位移是在2D
位移的基础上,可以让元素沿z
轴位移,具体使用方式如下:
- 先给元素添加转换属性
transform
- 编写
transform
的具体值,3D
相关可选值如下:
值 | 含义 |
---|---|
translateZ | 设置z 轴位移,需指定长度值,正值向屏幕外,负值向屏幕里,且不能写百分比。 |
translate3D | 第1个参数对应x 轴,第2个参数对应y 轴,第3个参数对应z 轴,且均不能省略。 |
3D旋转
3D
旋转是在2D
旋转的基础上,可以让元素沿x
轴和y
轴旋转,具体使用方式如下:
- 先给元素添加转换属性
transform
- 编写
transform
的具体值,3D
相关可选值如下:
值 | 含义 |
---|---|
rotateX | 设置x 轴旋转角度,需指定一个角度值(deg ),面对x 轴正方向:正值顺时针,负值逆时针。 |
rotateY | 设置y 轴旋转角度,需指定一个角度值(deg ),面对y 轴正方向:正值顺时针,负值逆时针。 |
rotate3d | 前3 个参数分别表示坐标轴:x 、y 、z ,第4 个参数表示旋转角度,参数不允许省略。例如:transform:rotate3d(1, 1, 1, 30deg) ,意思是:x 、y 、z 分别旋转30 度。 |
3D缩放
3D
缩放是在2D
缩放的基础上,可以让元素沿z
轴缩放,具体使用方式如下:
- 先给元素添加转换属性
transform
- 编写
transform
的具体值,3D
相关可选值如下:
值 | 含义 |
---|---|
scaleZ | 设置z 轴方向的缩放比例,值为一个数字,1 表示不缩放,大于1 放大,小于1 缩放 |
scale3d | 第1个参数对应x 轴,第2个参数对应y 轴,第3个参数对应z 轴,参数不允许省略。 |
多重变换
多个变换,可以同时使用一个transform
来编写。
transform: translateZ(100px) scaleX(3) rotateY(40deg)
注意点:多重变换时,建议最后旋转。
背部可见性
使用backface-visibility
指定元素背面,在面向用户时是否可见,常见值如下:
visible
:指定元素背面可见,允许显示正面的镜像。—默认值hidden
:指定元素背面不可见。
**注意:backface-visibility
需要加在发生3D
变换元素的自身上。