2D/3D——transform

2022/3/11 23:19:18

编程Tag： 旋转 3d 2d transform 定义 10px angle

本文主要是介绍2D/3D——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 转换元素定义透视视图。

定义旋转的中心，绕哪个点旋转？默认是盒子的中心
语法

.mydiv{
  transform-origin: 0% 0%;  //这样中心就成了左上角的顶点，transform旋转就要以该点为中心旋转
}

这篇关于2D/3D——transform的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！