當我嘗試使用transform: rotate(xDeg);（在我的情況下transform: rotate(90deg)）時，無論我遵循什么教程或做什么，它都不會旋轉。
body {
background-color: black;
}
.rotate {
width: 200px;
height: 200px;
background-color: red;
margin: 200px;
}
.rotate:hover {
transform: rotate(90deg);
}<div class="rotate"></div>uj5u.com熱心網友回復：
當您嘗試使用transform: rotate(90Deg)它時，它會旋轉，但由于正方形，您將看不到旋轉，因為它會在幾分之一秒內旋轉，但是當您在旋轉時應用過渡時，您可以清楚地看到它。
現在，如果您看一下，rectangle您就可以清楚地理解我在說什么。
body {
display: grid;
place-items: center;
background-color: black;
}
.rotate {
width: 200px;
height: 200px;
background-color: red;
margin: 20px;
}
.rotate:hover {
transform: rotate(90deg);
transition: all 0.5s ease;
}
.rac {
width: 200px;
height: 100px;
background-color: red;
margin: 50px 20px;
}
.rac:hover {
transform: rotate(90deg);
}<div class="rotate"></div>
<div class="rac"></div>uj5u.com熱心網友回復：
您應該添加transition，否則您將看不到差異
body{
background-color:black;
}
.rotate {
width:200px;
height:200px;
background-color:red;
margin:200px;
transition: transform .5s ease-in-out;
}
.rotate:hover {
transform: rotate(90deg);
}<html>
<link rel="stylesheet" type="text/css" href="e.css">
<div class="rotate"></div>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483166.html