为什么无法实现360度旋转?

为什么无法实现360度旋转?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>3-1作业</title>

    <style>

        div {

            font-size: 14px;

            font-weight: bold;

            line-height: 50px;

            position:absolute;

            top:50%;

            right: 0;

            bottom: 0;

            left: 0;

            width: 200px;

            height: 50px;

            margin: 0 auto 0;

            text-align: center;

            background: #abcdef;

            /*此处写代码*/

/*            cursor: pointer;*/

/*            -webkit-transform:rotate(0deg);*/

                    transform:rotate(0deg);

/*            -webkit-transform:scale(1);*/

                    transform:scale(1);

/*            -webkit-transition-property:transform;*/

                    transition-property:transform;

/*            -webkit-transition-duration:1s;*/

                    transition-duration:1s;

/*            -webkit-transition-timing-function:ease-in-out;*/

                    transition-timing-function:ease-in-out;

/*            -webkit-transition-delay:0s;*/

                    transition-delay:0s;

           

        }

        /*此处写代码*/

        div:hover {

/*            -webkit-transform:rotate(90deg);*/

                    transform:rotate(360deg);

/*            -webkit-transform:scale(2);*/

                    transform:scale(2);

            cursor: pointer;

/*            -webkit-transition-property:transform;*/

                    transition-property:transform;

/*            -webkit-transition-duration:2s;*/

                    transition-duration:2s;

/*            -webkit-transition-timing-function:ease-in-out;*/

                    transition-timing-function:ease-in-out;

/*            -webkit-transition-delay:0s;*/

                    transition-delay:0s;

    

        } 

       

    </style>

</head>

<body>

    <div>www.imooc.com</div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
提问者 web_東 2017-03-15 11:36:43

transform:rotate(?deg) scale(?deg);两个属性一起写,360度可以有旋转的效果。

Hbrsql 2017-03-09 10:32:45

transform:rotate(?deg);

transform:scale(?);  //会覆盖掉上面的transform. 两个属性应一起写:transform:rotate(?deg) scale(?);  

div{transform:rotate(0deg);}

div:hover{transform:rotate(360deg);} //应为360deg的位置跟0deg的位置是一样的,所以没有旋转效果.

提问者 web_東 2017-03-09 10:32:18

解决啦,换一个webstorm编辑器皆可以啦,

  • Hbrsql #1
    代码没改的话,换成webstorm编辑器就可以?
    2017-03-09 10:33:56
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师