2D转换 transform
首先要清楚一点,在css中的x轴正方向从左至右,但是y轴的正方向是从上至下。
- 位移(改变元素的位置)
transform: translate(x,y)
定义2D转换,沿着x轴和y轴移动,实际上本质和定位当中的left right top bottom一样。
例如:
.box {
transform: translate(100px,200px);
/* 沿x轴正方向移动100px和沿y轴正方向移动200px
1. 最多能设置两个值, 一个值用来改变水平方向,另外一个值用来改变垂直方向
2. 如果设置两个值,第一个值代表水平,第二值代表垂直
3. 如果设置一个值,那么元素只能在水平方向移动
4. 如果希望让元素逆方向移动,可以设置负数
5. 可以设置百分比值,位移设置的值是相对元素自身宽高的
*/
2.旋转(rotate)
transform: rotate(angle);
.box {
transform: rotate(-45deg);
}
/*逆时针按中心点旋转45度
1. 设置的值代表旋转的角度(单位deg)
2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转(负数)
3. 可以通过transform-origin改变元素的旋转点位置(倾斜),默认值是center
*/
方式一:
transform-origin:middle 以中心点旋转,默认值
transform-origin:left top 左上角
transform-origin: left bottom 左下角
transform-origin:right top 右上角
transform-origin:right bottom 右下角
方式二:
transform-origin: 100px 100px;
3.缩放(scale)
transform: scale(sx, sy);
box {
transform: scale(2, 2);
}
/* 实际上就是x轴方向(也就是宽度)变大2倍,y轴方向(也就是高度)变大2倍
1. 最多能设置两个值,第一个值用来改变 宽度,另外一个值用来改变 高度。
2. 设置缩放的时候,每个值都代表的是 倍数,不能带单位。
3. 如果希望元素缩小,那么设置的值在 0 - 1 之间的小数,如果希望放大,则设置大于1的值。
4. 不能设置负数
5. 如果仅设置一个值,代表元素宽度和高度同时放大或者缩小相应的倍数
*/
4.倾斜(skew)
transform: skew(30deg, 45deg);
.box {
transform: skew(30deg, 45deg);
}
/*沿着水平方向倾斜30度,沿着垂直方向倾斜45度
1. 最多能设置两个值,都代表倾斜的角度值(deg)。
2. 第一个值代表元素沿着水平方向发生倾斜角度(x轴方向的两条边是不倾斜的), 第二个值代表元素沿着垂直方向发生倾斜角度(y轴方向的两条边是倾斜的)
3. 如果只设置一个值代表沿着水平方向倾斜斜
3D转换 transform
要清楚在css中的3d坐标系每个方向的指向
1.3d透视(perspective)
css中通过perspective来产生进大远小的效果
perspective设置方式及取值:
1. 如果希望看到translateZ()的’近大远小’效果,需要添加透视。
2. 给设置了transform属性元素的’直接父元素’设置透视即可
2. perspective的值可以设置为任意值,但通常推荐设置为600-1000之间
3. 如果希望设置一个合理的translateZ(),这个值应当小于perspective的值
2.位移(translate)
transform: translateX(n)
让元素沿着x轴移动
设置正数: 从左向右
设置负数: 从右向左
transform: translateY(n)
让元素沿着Y轴移动
设置正数: 从上向下
设置负数: 从下向上
transform: translateZ(n) - 新效果 配合perspective使用
让元素沿着Z轴移动
设置正数: 朝向我们视线移动(靠近我们)
设置负数: 背向移动(远离我们)
说明:生活中我们将这种现象称为’近大远小’,元素的与观察点之间的距离不同,看到的元素尺寸也不同,但实际元素自身并没有变化,只是一种’视觉差’导致的。
统一总结:
1. 3D中的位移也是相对于元素自身位置。
2. 3D转换中同样可以设置百分比,依然相对元素自己宽度和高度(后面的Z不能设置百分比)
3.旋转(rotate)
注意:旋转了以后,3d坐标轴的方向会发生变化的
rotateX(angle)
方向判断利用左手原则
rotateY(angle)
方向判断利用左手原则
rotateZ(angle)
方向判断利用左手原则
注:3D旋转中沿Z轴旋转的效果与2D转换中的旋转效果一样。
4.缩放(scale)
scaleX()
沿着x轴放大或缩小
scaleY()
沿着y轴放大或缩小
scaleZ()
沿着Z轴放到或缩小
注意:如果希望看到scaleZ()的效果,该元素必须是立体图形 。
5.倾斜 (skew)
3d中的倾斜实际和2d中的倾斜是一样的
skewX()
沿着x轴倾斜,x轴方向的两条边平行
skewY()
沿着y轴倾斜,y轴方向的两条边平行
6.子元素保留3D转换
transform-style: flat;
transform-style: preserve-3d;
flat 不保留3d转换,默认值
preserve-3d; 子元素保留3d转换,如果不设置这个属性,内部元素不会存在3D的遮挡关系(伪3D)
- 我们通过立方体案例发现,如果不设置这个样式,元素是一种伪3D效果,是平面结构
- 设置后可以看到元素呈现立体的显示效果,但是注意,设置了该样式,也要旋转给个角度才可以更直观的看出是个3d立体图。
⚠️preserve-3d设置在需要3d显示效果的父元素上。