为什么我的代码不能旋转360度？？？

div {
            transform:rotate(0deg);
            -webkit-transition:transform 2s ease-in-out 1s;
               -moz-transition:transform 2s ease-in-out 1s;
                 -o-transition:transform 2s ease-in-out 1s;
                    transition:transform 2s ease-in-out 1s;
        }
        div:hover{
            transform:rotate(-360deg) scale(2);
            -webkit-transition:transform 2s ease-in-out 1s;
               -moz-transition:transform 2s ease-in-out 1s;
                 -o-transition:transform 2s ease-in-out 1s;
                    transition:transform 2s ease-in-out 1s;

        }

慕粉4337410 2016-12-25

源自：CSS3过渡 3-3 编程练习

收起

2回答

提问者慕粉4337410 2016-12-26 17:33:21

谢谢！！！

收起回答

小丸子爱吃菜 2016-12-25 23:34:57

正确代码如下：

div {
/*transform:rotate(0deg);*//*这行代码要去掉*/
            -webkit-transition:transform 2s ease-in-out 1s;
               -moz-transition:transform 2s ease-in-out 1s;
                 -o-transition:transform 2s ease-in-out 1s;
                    transition:transform 2s ease-in-out 1s;
        }
        div:hover{
transform: rotate(360deg) scale(2);

-webkit-transform: rotate(360deg) scale(2);

-moz-transform: rotate(360deg) scale(2);

-o-transform: rotate(360deg) scale(2);

-ms-transform: rotate(360deg) scale(2);

}

祝学习愉快！

收起回答

吃了饿饿了又吃 #1

请问为什么要删除原先的transform: rotate(0deg);之前的案例是加的，还是因为旋转360°的原因？

2017-01-18 01:15:54
吃了饿饿了又吃 #2

之前的例子去掉rotate（0deg）也是可以的。请问：之前的例子为什么要加 transform:rotate(0deg); 以及在hover上加transition:transform 2s ease-in-out 1s;这些代码呢，去掉应该也是同效果（如果效果方式一样的话）。

2017-01-18 01:21:28