CSS transform-origin
此CSS属性用于更改转换后元素的位置。在这一点上将应用转换。它确定了元素转换的起源。
必须将
transform-origin 属性与
transform 属性一起使用。
2d转换可以更改元素的x轴和y轴，而3D转换可以更改元素的x轴和y轴。 z轴以及x轴和y轴。
可以使用一个，两个或三个值来指定此属性。第一个值影响水平位置，第二个值影响垂直位置，第三个值指示z轴的位置。第三个值也可以用于3D转换，并且不能使用百分比来定义。
如果仅指定一个值，则该值必须是长度或百分比，或者是left，center，right，top，和bottom之一。
如果我们指定两个值，则第一个值必须是长度或百分比，或者是关键字值left, right和 center 。第二个值必须是长度或百分比，或者是center, top和bottom之一的关键字值。
当我们指定三个值时，前两个值与二值语法相同，但是第三个值表示z偏移，因此它必须是长度。
transform-origin （转换来源）属性的默认值为
50％50％，它表示元素的中心。
语法
transform-origin: x-axis y-axis z-axis | initial | inherit;
此属性的值列表如下。
| 值 |
说明 |
| x-axis |
它代表水平位置。该值指定视图在x轴上的位置。其可能的值为长度，百分比，left、right和center。 |
| y-axis |
它代表垂直位置。此值指定视图在y轴上的位置。其可能的值为length, percentage, top, bottom和center。 |
| z-axis |
此值与3D转换一起使用。此值指定视图在z轴上的位置。可以使用 length 值进行定义。不允许使用百分比值。 |
| 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 属性。
示例
在此示例中，我们将应用3D转换元素上的
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;
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>
输出
