html transform

作者：迷失未来发布日期:2026-07-02 浏览:34

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 CSS transform 属性来旋转、缩放和倾斜元素 */
        .transformed {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: transform 0.5s;

            /* 默认状态下应用一些变换 */
            transform: rotate(45deg) scale(1.2) skew(10deg, 20deg);
        }

        /* 当鼠标悬停时，改变变换效果 */
        .transformed:hover {
            transform: rotate(75deg) scale(1.5) skew(20deg, 30deg);
        }
    </style>
</head>
<body>
    <div class="transformed"></div>
</body>
</html>

解释说明：

transform 是 CSS 中用于对元素进行旋转、缩放、移动或倾斜的属性。
在上面的代码中，.transformed 类定义了一个 100x100 像素的蓝色方块，并对其应用了初始的变换效果：旋转 45 度、缩放 1.2 倍、倾斜 10 度（X 轴）和 20 度（Y 轴）。
当用户将鼠标悬停在该元素上时，transform 属性会过渡到新的值：旋转 75 度、缩放 1.5 倍、倾斜 20 度（X 轴）和 30 度（Y 轴）。

上一篇：html title属性

下一篇：html5中transform