为什么动画效果在谷歌浏览器是旋转放大在360浏览器是只放大不旋转呢

来源:1-1 课程介绍

Glimmering5426

2017-03-20 16:46:43

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style>

        div {

            font-size: 14px;

            font-weight: bold;

            line-height: 50px;

            position: fixed;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            width: 200px;

            height: 50px;

            margin: auto;

            cursor: pointer;

            text-align: center;

            background: #abcdef;

                  -webkit-transform:rotate(0deg);

                     -moz-transform:rotate(0deg);

                      -ms-transform:rotate(0deg);

                       -o-transform:rotate(0deg);

                          transform:rotate(0deg);

            

            -webkit-transition: transform 0.6s ease-in-out;

      -moz-transition: transform 0.6s ease-in-out;

       -ms-transition: transform 0.6s ease-in-out;

        -o-transition: transform 0.6s ease-in-out;

           transition: transform 0.6s ease-in-out;

      

           

        }

       div:hover{ -webkit-transform:rotate(-360deg) scale(1.5);

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

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

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

                          transform:rotate(-360deg) scale(1.5);

           

   -webkit-transition: transform 0.6s ease-in-out;

      -moz-transition: transform 0.6s ease-in-out;

       -ms-transition: transform 0.6s ease-in-out;

        -o-transition: transform 0.6s ease-in-out;

           transition: transform 0.6s ease-in-out;

    }

       

    </style>

</head>

<body>

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

</body>

</html>


写回答

1回答

小于飞飞

2017-03-20

你好,请将 div样式 中 transform:rotate(0deg) scale(1);补齐呦。希望对你有帮助,祝学习愉快,欢迎采纳。

0

0 学习 · 5760 问题

查看课程