转换 transform

转换

定义：

1、转换是使元素改变形状、尺寸和位置的一种效果

2、又称为变形，即，可以向元素应用 2D 或 3D 转换，从而对元素进行旋转、缩放、移动或倾斜

3、2D转换：使元素在 X 轴和 Y 轴平面上发生变化，改变其形状、尺寸和位置

4、3D转换：元素还可以在 Z 轴上发生变化

 

 

旋转：

Transform:rotate(30deg);顺时针旋转30°；

Transform:rotate(-30deg);逆时针旋转30°；

 

 

缩放：

Transform:scale(2,0.5); x坐标放大2倍，纵坐标缩小0.5倍

Transform:scalte(0.5,2);x轴方向缩小0.5倍，y轴放大2倍；

 

 

 

解决缩放和旋转不能共存的问题：

transform: rotate(-30deg) scale(0.5,2);

 

 

 

设置旋转原点：

用来指定元素的转换原点位置，默认情况下，转换的原点在元素的中心点，或者是 X 轴和 Y 轴的 50% 处

transform-origin : 数值/百分比/关键字;

一个值：表示所有轴的位置

两个值：表示 X 轴和 Y 轴

三个值：表示 X 轴、Y 轴和 Z 轴

transform-origin: 30px;

 

倾斜：skew（deg）

transform: skew(45deg);

 

 

平移：translate

transform:translate(100px);

 

 

 

写在同一行时：一起生效

transform: rotate(-30deg) scale(0.5,2) skew(45deg) translate(100px);

 

左上角：

transform-origin:0% 0%;左上角

transform-origin:left top;左上角

 

 

 

 

 

 

 

 

 

 

 

缩放！！！！：：它缩放了所有，包括像素！！！

旋转！！！！：：它旋转了坐标轴！所有的转换均以旋转后的坐标轴来转换！！

 

 

 

 

 

 

3D

首先：给父标签设置属性：transform-style:perspective-3d;

然后：给需要3D变换的子标签设置属性:transform-style:perspective-3D;

这两步缺一不可

 

 

下面正式设置子标签的属性（这里只写关于3D的）：

第一条：设置3D 元素距视图的距离，以像素计

Perspective:(400px)(像素越小代表视角离元素越近，会变大，像素越大，代表视角离元素越远，会变小)

第二条设置3D旋转！起码拉开一个角，使其有3D效果

位移：translateZ(100px);

旋转：rotateX(45deg);

rotateY(45deg);

rotateZ(45deg);

(其一便可)；

倾斜：skew(x)或skew(x,y)取值为角度

缩放：scale(0.5,0.3)取值为0~1的小数，不可百分比！