CSS transform-origin屬性用法及代碼示例

此 CSS 屬性用於更改已轉換元素的位置。它是應用變換的點。它建立了元素轉換的起源。它可以應用於 2D 和 3D 旋轉。

transform-origin 屬性必須與轉換屬性一起使用。 2d 變換可以改變元素的 x 軸和 y 軸，而 3D 變換可以隨 x 軸和 y 軸一起改變 z 軸。

可以使用一個、兩個或三個值來指定此屬性。第一個值影響水平位置，第二個值影響垂直位置，第三個值表示 z 軸的位置。第三個值也適用於 3D 轉換，不能使用百分比定義。

如果我們隻指定一個值，則該值必須是長度或百分比，或關鍵字值 left、center、right、top 和 bottom 之一。
如果我們指定兩個值，第一個值必須是長度或百分比或關鍵字值 left、right 和 center。第二個值必須是長度或百分比或關鍵字值 center、top 和 bottom 之一。
當我們指定三個值時，那麽前兩個值與two-value語法相同，但第三個值代表z-offset，所以它必須是一個長度。

transform-origin 屬性的默認值為 50% 50%，代表元素的中心。

用法

transform-origin:x-axis y-axis z-axis | initial | inherit;

該屬性的值如下表所示。

值	描述
x-axis	它代表水平位置。此值指定視圖在 x 軸上的位置。它的可能值是長度、百分比、左、右和中心。
y-axis	它代表垂直位置。此值指定視圖在 y 軸上的位置。它的可能值是長度、百分比、頂部、底部和中心。
z-axis	該值與 3D 轉換一起使用。該值指定視圖在 z 軸上的位置。它可以使用長度值來定義。它不允許百分比值。
initial	它將屬性設置為其默認值。
inherit	它從其父元素繼承屬性。

讓我們通過一些插圖來理解這個屬性。

示例

在此示例中，我們將 transform-origin 屬性與長度和百分比值一起應用。兩個元素都有 45 度的旋轉。這裏是元素的 2D 變換。

<!DOCTYPE html>
<html>

<head>
<style>
div{
height:100px;
width:400px;
border:5px dotted violet;
font-size:20px;
}
.outer {
margin:100px;
background-color:cyan;
}
.box {
background:url( "diamond.png");
transform:rotate(35deg);
transform-origin:5% 2%;
}
.outer1{
margin-left:500px;
background-color:cyan;
}
.box1 {
background:url( "diamond.png");
transform:rotate(45deg);
transform-origin:5% 2%;
}
</style>
</head>

<body>
<h1> Example of the CSS transform-origin Property </h1>

<div class="outer"> transform-origin:5% 2%;
<div class="box"></div>
</div>
<div class="outer1"> transform-origin:100px 200px;
<div class="box1"></div>
</div>
</body>

</html>

輸出

現在，在下一個示例中，我們將使用關鍵字值指定位置。

示例

在此示例中，我們將 transform-origin 屬性與關鍵字值一起應用。

<!DOCTYPE html>
<html>

<head>
<style>
div{
height:100px;
width:400px;
border:5px dotted violet;
font-size:20px;
}
.outer {
margin:100px;
background-color:cyan;
}
.box {
background:url( "diamond.png");
transform:rotate(35deg);
transform-origin:left bottom;
}
.outer1{
margin-left:500px;
background-color:cyan;
}
.box1 {
background:url( "diamond.png");
transform:rotate(45deg);
transform-origin:right top;
}
</style>
</head>

<body>
<h1> Example of the CSS transform-origin Property </h1>

<div class="outer"> transform-origin:left bottom;
<div class="box"></div>
</div>
<div class="outer1"> transform-origin:right top;
<div class="box1"></div>
</div>
</body>

</html>

輸出

現在，讓我們在具有 3D 變換的元素上應用 transform-origin 屬性。

示例

在此示例中，我們將 transform-origin 屬性應用於 3D 變換元素。

<!DOCTYPE html>
<html>

<head>
<style>
div{
height:100px;
width:400px;
border:5px dotted violet;
font-size:20px;
}
.outer {
margin:100px;
background-color:cyan;
text-align:center;
}
.box {
background:url( "diamond.png");
  transform:rotate3d(3, 2, 1, 75deg);
  transform-origin:70% 10% 150px;
}
.outer1{
margin-left:500px;
background-color:cyan;
text-align:center;
}
.box1 {
background:url( "diamond.png");
  transform:rotate3d(2, 2, 1, 75deg);
  transform-origin:bottom right 200px;
}
</style>
</head>

<body>
<h1> Example of the CSS transform-origin Property </h1>

<div class="outer"> transform-origin:70% 10% 150px;
<div class="box"></div>
</div>
<div class="outer1"> transform-origin:bottom right 200px;
<div class="box1"></div>
</div>
</body>

</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS transform-origin property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。