HTML | DOM 样式 transformOrigin 属性(1)

📌 相关文章

📜 HTML | DOM 样式 transformOrigin 属性(1)

📅 最后修改于: 2023-12-03 15:15:36.840000 🧑 作者: Mango

HTML | DOM 样式 `transformOrigin` 属性

概述

在 HTML 的 DOM (文档对象模型) 中，transformOrigin 属性用于定义元素的转换原点。它是 CSS3 的一部分，通过定义转换的原点，可以使元素在进行旋转、缩放或平移转换时围绕指定的点进行操作。

语法

transformOrigin 属性的语法如下所示：

element.style.transformOrigin = "x-axis y-axis z-axis";

其中，x-axis、y-axis 和 z-axis 都是关键字，用于指定转换原点的横纵坐标以及纵深坐标。它们可以取以下值之一：

top
bottom
left
right
center
length（像素值）
percentage（百分比值）

在上述语法中，element 是要应用 transformOrigin 的元素名。

示例

下面是一些示例，演示了如何使用 transformOrigin 属性：

示例1：旋转元素

<!DOCTYPE html>
<html>
<head>
    <style>
        .rotate {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            transform: rotate(45deg);
            transform-origin: top left;
        }
    </style>
</head>
<body>
    <div class="rotate"></div>
</body>
</html>

在上述示例中，一个宽高为 200px 的红色矩形被旋转了 45 度。通过设置 transform-origin: top left;，元素围绕左上角顶点进行旋转。

示例2：缩放元素

<!DOCTYPE html>
<html>
<head>
    <style>
        .scale {
            width: 200px;
            height: 200px;
            background-color: #00ff00;
            transform: scale(2);
            transform-origin: center center;
        }
    </style>
</head>
<body>
    <div class="scale"></div>
</body>
</html>

上述示例中，一个宽高为 200px 的绿色矩形被缩放了两倍。通过设置 transform-origin: center center;，元素的缩放中心被设置为元素的中心点。

示例3：平移元素

<!DOCTYPE html>
<html>
<head>
    <style>
        .translate {
            width: 200px;
            height: 200px;
            background-color: #0000ff;
            transform: translate(100px, 100px);
            transform-origin: bottom right;
        }
    </style>
</head>
<body>
    <div class="translate"></div>
</body>
</html>

在上述示例中，一个宽高为 200px 的蓝色矩形被平移了 100px 横向和 100px 纵向。通过设置 transform-origin: bottom right;，元素的平移基点被设置为右下角。

兼容性

transformOrigin 属性的兼容性如下所示：

Chrome: 36.0 及以上版本
Firefox: 16.0 及以上版本
Safari: 9.0 及以上版本
Opera: 23.0 及以上版本
IE / Edge: 10.0 及以上版本

总结

通过使用 transformOrigin 属性，可以在进行 CSS3 转换时定义元素的转换原点。这样可以实现更复杂的转换效果，如旋转、缩放和平移。设置 transform-origin 可以通过关键字或具体的坐标值来定义转换原点的位置。请注意，该属性仅在 HTML DOM 中可用。

更多关于 transformOrigin 属性的详细说明和示例可以参考 MDN Web 文档。