我正在学习CSS3.现在,我在w3schools网站上看到的是：
CSS
#ID {
transition: transform 3s;
}
#ID:hover {
transform: rotateX(20deg);
}
而我所做的就是：
CSS：
#ID:hover {
transform: rotateX(20deg);
transition: transform 3s;
}
解决方法
简短的回答：
如果在element：hover中定义过渡属性,则只会在该状态下应用它.
说明：
无论您在element中定义哪个CSS属性：hover仅在元素处于悬停状态时应用,而您在元素中定义的任何CSS属性都将应用于两种状态.
在正常状态下声明的Transition属性：
查看元素状态更改时转换是如何运行的.当您停止悬停元素时,它仍将使转换回到正常状态.
代码链：
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
transition: transform 1s;
}
#ID:hover {
transform: rotateX(60deg);
}
<div id="ID"></div>
在悬停状态中声明的过渡属性：
查看停止悬停元素时转换如何中断,并立即跳转到正常状态.
代码链：
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
}
#ID:hover {
transition: transform 1s;
transform: rotateX(60deg);
}
<div id="ID"></div>
