我有一个名为 imgData 的类的 div。它应用了一些背景图像。当鼠标没有悬停在这个 div 上时，就会应用一个名为 clickMe 的动画。这基本上可以扩展它。当鼠标在 div 上时，它应该暂停动画并旋转 Y(360) 并显示另一个图像。一切正常，但 rotationY() 不工作。如果我只删除动画，则 rotationY() 有效。这是为什么？如何解决？这是我的代码。
<?xml-stylesheet type="text/xsl" href="#style1"?>
<!DOCTYPE doc [
<!ATTLIST xsl:stylesheet
id ID #IMPLIED>
]>
<doc>
<head>
<xsl:stylesheet version="1.0" id="style1" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<style>
.imgData {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg");
background-size: 400px 180px;
height: 180px;
width:400px;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
animation-name: clickMe;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.imgData:hover{
animation-play-state: pause;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
-o-animation-play-state: paused;
background: url("https://imgsnap.com/images/2015/10/14/6984999-cool-lights.jpg");
background-size: 400px 180px;
height: 180px;
width:400px;
cursor : pointer;
-moz-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
@keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}
@-webkit-keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}
@-moz-keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}
@-o-keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}
</style>
</head>
<body><div class="imgData"></div></body>
</html>
</xsl:template>
</xsl:stylesheet>
</head>
<body><imageURL></imageURL></body>
</doc>
最佳答案
我期待这样的事情？运行代码段。
.imgData {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg");
background-size: 400px 180px;
height: 180px;
width:400px;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
animation-name: clickMe;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.imgData:hover{
background-size: 400px 180px;
height: 180px;
width:400px;
background: url("https://imgsnap.com/images/2015/10/14/6984999-cool-lights.jpg");
cursor : pointer;
animation: rotate 2s normal forwards ease-in-out;
}
@keyframes rotate {
0% { transform: rotateY(0deg) }
100% { transform: rotateY(360deg) }
}
@keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}
@-webkit-keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}
@-moz-keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}
@-o-keyframes clickMe {
from {transform: scale(1,1);}
to {transform: scale(1.1,1.1);}
}<?xml-stylesheet type="text/xsl" href="#style1"?>
<!DOCTYPE doc [
<!ATTLIST xsl:stylesheet
id ID #IMPLIED>
]>
<doc>
<head>
<xsl:stylesheet version="1.0" id="style1" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
</head>
<body><div class="imgData"></div></body>
</html>
</xsl:template>
</xsl:stylesheet>
</head>
<body><imageURL></imageURL></body>
</doc>关于html - CSS transform RotateY() 不适用于动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47372621/