transform是CSS3中的一个属性,用于对元素进行各种变形操作, 包括旋转、缩放、移动和倾斜等。 具体功能如下: 旋转:使用rotate()函数,可以顺时针或逆时针旋转元素。例如:transform: rotate(30deg);表示顺时针旋转30度。 缩放:使用scale()函数,可以放大或缩小元素。例如:transform: scale(2, 4);表示在X轴上放大2倍,在Y轴上放大4倍。 移动:使用translate()函数,可以平移元素。例如:transform: translate(50px, 100px);表示在X轴上移动50像素,在Y轴上移动100像素。 倾斜:使用skew()函数,可以倾斜元素。例如:transform: skew(30deg, 20deg);表示在X轴上倾斜30度,在Y轴上倾斜20度。 |
translate()是transform的一个具体功能,用于平移元素。 它接受两个参数,分别表示沿X轴和Y轴的移动距离。例如: translate(50px, 100px);表示元素在X轴上移动50像素,在Y轴上移动100像素。 translate(-50%, -50%)表示元素在X轴和Y轴上分别移动其自身宽度和高度的一半。 .element { transform: translate(50px, 100px); } |
.element { transform: rotate(30deg); } |
.element { transform: scale(2, 4); } |
|