Question

我在网页中使用转换和转换，但我注意到一些奇怪的事情。通常，在坐标系上，X水平放置，Y垂直放置。

在我的代码中，当我使用transition + transform（rotateX）时，它会垂直旋转（在坐标系中是水平的），当我使用transition + transform（rotateY）时，它会水平旋转（在坐标系中是垂直的））。

我对此感到困惑。没有找到关于这个奇怪问题的任何答案。令人困惑的是，我将它们旋转360度左右。

有一个jsfiddle：

.workSheets{
	text-align: center;
	padding-top:20px;
}

.workBoxes{
	display:inline-block;
	height:240px;
	width:240px;
	margin-left:5px;
	margin-right:5px;
    
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serifcursive;
}
.secondArticle{
	background-color:#f6f6f6;
}
.design{
	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{
	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{
	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{
	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（）CSS函数定义了一个转换，它将元素移动到横坐标而不会使其变形。移动量由指定的角度定义;如果为正，则运动将为顺时针，如果为负，则为逆时针。

旋转轴经过原点，由transform-origin CSS属性定义。

rotateX（a）是rotate3D(1, 0, 0, a)
的简写

过渡CSS中的X轴和Y轴是否反转？

1 个答案: