html5中transform

作者：朕不想活了发布日期:2025-07-10 浏览:38

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 transform 属性对元素进行旋转、缩放、倾斜或平移 */
        .transform-example {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: transform 0.5s;

            /* 默认情况下元素没有变换 */
            transform: none;
        }

        /* 当鼠标悬停在元素上时，应用变换 */
        .transform-example:hover {
            /* 旋转45度，缩放1.5倍 */
            transform: rotate(45deg) scale(1.5);
        }
    </style>
</head>
<body>
    <div class="transform-example"></div>
    <p>将鼠标悬停在红色方块上以查看变换效果。</p>
</body>
</html>

解释说明：

transform 属性用于对元素进行旋转、缩放、倾斜或平移。
在上面的示例中，.transform-example 类定义了一个 100x100 像素的红色方块。
使用 transform: none; 表示默认情况下元素没有变换。
当用户将鼠标悬停在该元素上时，hover 伪类会触发 transform: rotate(45deg) scale(1.5);，使元素顺时针旋转 45 度并缩放 1.5 倍。
transition: transform 0.5s; 用于定义变换的过渡效果，使变换在 0.5 秒内平滑完成。

上一篇：html 在线美化

下一篇：markdown 转html