Question

我有一个名为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>

Answer 1

我预计会有这样的事情吗？运行代码段。

＆＃13;

.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);}
}

＆＃13;

<?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>

＆＃13;

Answer 2

<?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);
                    }

                    @-ms-keyframes clickMe {
                        from { -ms-transform: rotate(0deg); }
                        to { -ms-transform: rotate(360deg); }
                    }
                    @-moz-keyframes clickMe {
                        from { -moz-transform: rotate(0deg); }
                        to { -moz-transform: rotate(360deg); }
                    }
                    @-webkit-keyframes clickMe {
                        from { -webkit-transform: rotate(0deg); }
                        to { -webkit-transform: rotate(360deg); }
                    }
                    @keyframes clickMe {
                        from {
                            transform:rotate(0deg);
                        }
                        to {
                            transform:rotate(360deg);
                        }
                    }

                </style>
            </head>
            <body><div class="imgData"></div></body>
        </html>
    </xsl:template>
</xsl:stylesheet>
</head>
<body><imageURL></imageURL></body>
</doc>

我认为你的css3转换代码错误，我只是更改你的CSS部分并在此处过去请检查这是你的意思。

CSS转换RotateY（）不使用动画？

2 个答案: