css rotate

作者：叶随雨落发布日期:2026-07-24 浏览:62

/* 使用 CSS rotate() 函数旋转元素 */

/* 示例 1: 旋转一个 div 元素 45 度 */
div {
  transform: rotate(45deg);
}

/* 解释:
- transform 属性用于应用 2D 或 3D 转换。
- rotate() 函数用于定义旋转的角度，单位为度 (deg)。
- 在这个例子中，div 元素将顺时针旋转 45 度。
*/

/* 示例 2: 动态旋转一个按钮，当鼠标悬停时旋转 720 度 */
button {
  transition: transform 0.5s ease;
}

button:hover {
  transform: rotate(720deg);
}

/* 解释:
- transition 属性用于定义平滑过渡效果，这里设置 transform 属性在 0.5 秒内平滑变化。
- 当鼠标悬停在按钮上时，按钮会旋转 720 度（两圈）。
*/

/* 示例 3: 旋转并倾斜一个图像 */
img {
  transform: rotate(30deg) skew(10deg);
}

/* 解释:
- 除了旋转，还可以结合其他转换函数如 skew() 来创建更复杂的效果。
- 这里图像首先被旋转 30 度，然后倾斜 10 度。
*/

上一篇：css超出隐藏

下一篇：css calc函数