csstransform属性

作者：亡梦发布日期:2025-02-16 浏览:69

/* 使用 csstransform 属性进行元素的变换 */

/* 1. 平移（translate） */
.element {
  transform: translate(50px, 100px); /* 向右平移50px，向下平移100px */
}

/* 2. 缩放（scale） */
.element {
  transform: scale(1.5); /* 元素放大1.5倍 */
}

/* 3. 旋转（rotate） */
.element {
  transform: rotate(45deg); /* 元素顺时针旋转45度 */
}

/* 4. 倾斜（skew） */
.element {
  transform: skew(20deg, 10deg); /* 水平倾斜20度，垂直倾斜10度 */
}

/* 5. 组合多个变换 */
.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5); 
  /* 先平移，再旋转，最后缩放 */
}

以上代码展示了如何使用 transform 属性对元素进行多种变换操作，包括平移、缩放、旋转和倾斜。你可以在 CSS 中组合这些变换效果来创建复杂的变化效果。

上一篇：css注释写法正确的是

下一篇：css transition属性