Свойство transform-origin
Свойство transform-origin устанавливает координаты точки, относительно которой будет происходить трансформация элемента. По умолчанию координата точки установлена по центру трансформируемого элемента.
transform-origin: left top;- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
transform-origin: center center;
Первый параметр - координата точки трансформации по оси X, второй - координата точки трансформации по оси Y. Если первое и второе совпадают, можно указать только одно значение, которое применится к двум осям.
Доступные значения по оси X - left, center, right
Доступные значения по оси Y - top, center, bottom
<div class="example-1">
<div class="example-1-square"></div>
</div>
<style>
.example-1 {
width: 200px;
height: 200px;
position: relative;
border: 1px dashed red;
}
.example-1:before {
content: "";
display: block;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0);
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
}
.example-1-square {
width: 100%;
height: 100%;
background: #84dd51;
transform: rotate(10deg);
transform-origin: center;
}
</style>transform-origin: left top;
<div class="example-2">
<div class="example-2-square"></div>
</div>
<style>
.example-2 {
width: 200px;
height: 200px;
position: relative;
border: 1px dashed red;
}
.example-2-square:before {
content: "";
display: block;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.example-2-square {
width: 100%;
height: 100%;
position: relative;
background: #84dd51;
transform: rotate(10deg);
transform-origin: left top;
}
</style>transform-origin: 50px 50px;
Можно указывать координаты точки используя единицы измерения px, em, rem и другие. Первый параметр - координата точки по оси X, второй по оси Y. Начальные координаты берутся от верхнего левого угла элемента и равны 0, 0.
<div class="example-3">
<div class="example-3-square"></div>
</div>
<style>
.example-3 {
width: 200px;
height: 200px;
position: relative;
border: 1px dashed red;
}
.example-3:before {
content: "";
display: block;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.example-3-square {
width: 100%;
height: 100%;
background: #84dd51;
transform: rotate(10deg);
transform-origin: 50px 50px;
}
</style>transform-origin: 100% 50%;
Можно указывать координаты точки используя %. Первый параметр - координата точки по оси X, второй по оси Y. Начальные координаты берутся от верхнего левого угла элемента и равны 0, 0.
<div class="example-4">
<div class="example-4-square"></div>
</div>
<style>
.example-4 {
width: 200px;
height: 200px;
position: relative;
border: 1px dashed red;
}
.example-4:before {
content: "";
display: block;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
transform: translateX(-50%);
position: absolute;
top: 50%;
left: 100%;
z-index: 2;
}
.example-4-square {
width: 100%;
height: 100%;
background: #84dd51;
transform: rotate(10deg);
transform-origin: 100% 50%;
}
</style>