随手一记-css进阶

2D转换

transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。

transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作

translate平移

transform: translateX(100px);

transform: translateY(100px);

transform: translate(100px, 100px);

transform: translate(50%, 50%);

注意：

translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。

translate移动的元素并不会影响其他盒子，类似于相对定位。

scale缩放

transform: scaleX(0.5);/让宽度变化/

transform: scaleY(0.5);/让高度变化，注意不能写多个transform，不然会覆盖。/

transform: scale(0.5);/让宽度和高度同时变化/

注意：

scale接收的值倍数,没有单位

一个值表示宽高等比例的缩放。

可以通过transition-origin设定旋转原点

transform-origin转换原点

通过transform-origin可以设置转换的中心原点。

transform-origin: center center;

rotate旋转

transform: rotate(360deg);//旋转360度

transform: rotate(-360deg);//逆时针旋转360度

注意：

单位是deg，角度，不是px

正值顺时针转，负值逆时针转

可以通过transform-origin设定旋转原点

skew斜切(变形 了解即可)

skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个

沿着那根轴进行斜切 那个轴保持不动 另外一个轴朝这个轴偏移对应的角度

/在水平方向倾斜30deg/

transform: skewX(30deg);

/在垂直方向倾斜30deg/

transform: skewY(30deg);

转换合写问题(重点)

1.当一个元素有多个2D转换(比如 既旋转又缩放)效果 采用连写的方式

2.2D转换的顺序不同 结果也就不同 主要针对的是移动和旋转 (物体发生了旋转 内部坐标系也跟着发生了旋转)

3.多个状态下面有2D转换效果时, 需要复制前面已经存在的transform效果