Ось X и ось Y обращены в переходы CSS?

Question

Я использую переходы с преобразованиями на своей веб-странице, но я заметил что-то странное. Как правило, в системе координат X позиционируется горизонтально, а Y позиционируется вертикально.

В моем коде, когда я использую переход + преобразование (rotateX) он вращается вертикально (которая в системе координат по горизонтали), а также при использовании перехода + преобразование (rotateY), он вращается горизонтально (который в системе координат является вертикальным).

Я немного запутался в этом. Не нашел ответов на этот любопытный вопрос. Является ли запутанным исходя из этого, я их вращения на 360 градусов или около того ..

Там в jsfiddle:

.workSheets{ 
 
\t text-align: center; 
 
\t padding-top:20px; 
 
} 
 

 
.workBoxes{ 
 
\t display:inline-block; 
 
\t height:240px; 
 
\t width:240px; 
 
\t margin-left:5px; 
 
\t margin-right:5px; 
 
    
 
    color:white; 
 
    font-family: Verdana, Geneva, Tahoma, sans-serifcursive; 
 
} 
 
.secondArticle{ 
 
\t background-color:#f6f6f6; 
 
} 
 
.design{ 
 
\t background-color:#10c6fc; 
 
    background-image: url('../img/monitor.png'); 
 
    background-repeat: no-repeat; 
 
    background-position:center center;  
 
    
 
    -webkit-transition:transform 2s; 
 
    -o-transition:transform 2s; 
 
    -moz-transition:transform 2s; 
 
    transition:transform 2s; 
 
} 
 

 
.design:hover{ 
 
    -webkit-transform:rotateY(360deg); 
 
    -o-transform:rotateY(360deg); 
 
    -moz-transform:rotateY(360deg); 
 
    transform:rotateY(360deg); 
 
} 
 

 

 
.development{ 
 
\t background-color: #835aeb; 
 
    background-image: url('../img/wand.png'); 
 
    background-repeat:no-repeat; 
 
    background-position:center center; 
 
    
 
    -webkit-transition:transform 2s; 
 
    -o-transition:transform 2s; 
 
    -moz-transition:transform 2s; 
 
    transition:transform 2s; 
 

 
} 
 

 
.development:hover{ 
 
    -webkit-transform:rotateY(360deg); 
 
    -o-transform:rotateY(360deg); 
 
    -moz-transform:rotateY(360deg); 
 
    transform:rotateY(360deg); 
 
} 
 

 
.testing{ 
 
\t background-color:#002453; 
 
    background-image: url('../img/deliver.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    
 
    -webkit-transition:transform 2s; 
 
    -o-transition:transform 2s; 
 
    -moz-transition:transform 2s; 
 
    transition:transform 2s; 
 
} 
 

 
.testing:hover{ 
 
    -webkit-transform:rotateX(360deg); 
 
    -o-transform:rotateX(360deg); 
 
    -moz-transform:rotateX(360deg); 
 
    transform:rotateX(360deg); 
 
} 
 

 

 
.launch{ 
 
\t background-color:#ff2b4a; 
 
    background-image: url('../img/plane.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    
 
    -webkit-transition:transform 2s; 
 
    -o-transition:transform 2s; 
 
    -moz-transition:transform 2s; 
 
    transition:transform 2s; 
 
} 
 

 
.launch:hover{ 
 
    -webkit-transform:rotateX(360deg); 
 
    -o-transform:rotateX(360deg); 
 
    -moz-transform:rotateX(360deg); 
 
    transform:rotateX(360deg); 
 
}

<div class="workSheets"> 
 
        <div class="workBoxes design"> 
 
         <h3 class="boxesFont">DESIGN</h3> 
 
        </div> 
 
        <div class="workBoxes development"> 
 
         <h3 class="boxesFont">DEVELOPMENT</h3> 
 
        </div> 
 
        <div class="workBoxes testing"> 
 
         <h3 class="boxesFont">TESTING</h3> 
 
        </div> 
 
        <div class="workBoxes launch"> 
 
         <h3 class="boxesFont">LAUNCH</h3> 
 
        </div> 
 
</div>

Answer 1

Вы можете прочитать все о преобразованиях в углубленных в MDN. там очень информативное описание о преобразованиях.

, как написано в этой странице, функция rotateX перемещает элемент вокруг оси абсцисс

Функция УС rotateX() определяет преобразование, которое перемещает элемент вокруг оси абсцисс не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки.

Ось вращения проходит по началу координат, определяемая по значению transform-origin CSS.

rotateX (а) является обобщающим для rotate3D(1, 0, 0, a)