Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии