2D/3D——transform
作者:互联网
transform
定义旋转的
语法:
.mydiv{
transform: rotate3d(30deg, 45deg, 100deg);
}
值 | 描述 |
---|---|
none | 定义不进行转换。 |
translate(x,y) | 定义 2D 平移。(10px, 10px) 就是把元素右移10px,再下移10px |
translate3d(x,y,z) | 定义 3D 平移。(3个值一个不能少)要用这个z值必须要先定义视角perspective(npx) |
scaleX(), ..Y() | 定义 2D 缩放。当为1的时候就是原样,0.5就是缩到一半 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
rotateX(ideg),rotateY(jdeg),rotateZ(kdeg) | 以中心对在(0,0,0)坐标原点,绕X,Y,Z轴旋转分别旋转i,j,k度 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
tranform-origin
定义旋转的中心,绕哪个点旋转?默认是盒子的中心
语法
.mydiv{
transform-origin: 0% 0%; //这样中心就成了左上角的顶点,transform旋转就要以该点为中心旋转
}
标签:angle,定义,transform,旋转,2D,10px,3D 来源: https://www.cnblogs.com/Lilc20201212/p/15993240.html