为什么我的变大一倍效果出不来

<!DOCTYPE html>

<html>

<head>

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

/*此处写代码*/

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 {

cursor:pointer;

transform: scale(2,2);

transform: rotate(360deg);

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

}

</style>

</head>

<body>

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

</body>

</html>

烟宇 2017-10-11

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

收起

1回答

卡布琦诺 2017-10-12 11:20:04

<!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;
            /*此处写代码*/
            /*transform:rotate(0deg);*这一句得强调*/
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        /*此处写代码*/
        div:hover {
            cursor:pointer;
            /*transform: scale(2,2);*/
            transform: scale(2) rotate(360deg);
            -webkit-transform: scale(2) rotate(360deg);
            /*下面的也需要去掉。已经在上面的div中定义了*/
            /*-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;*/
        }
 
    </style>
</head>
<body>
<div>www.imooc.com</div>
</body>
</html>

希望可以帮到你~

收起回答

提问者烟宇 #1

/*transform:rotate(0deg);*这一句得强调*/ /*这句为何不用写*/ -webkit-transition: all 0.5s ease-in-out; /*这里的property为何不用transform而是all*/ -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; /*此处写代码*/ div:hover { cursor:pointer; /*transform: scale(2,2);*/ transform: scale(2) rotate(360deg); -webkit-transform: scale(2) rotate(360deg); /*下面的也需要去掉。已经在上面的div中定义了*/ /*-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;*/ /*这里为何要删掉*/ }

2017-10-12 19:13:04
卡布琦诺回复提问者烟宇 #2

div里面已经设置过了，不去掉也可以，但是不去掉代码就会变得很冗佘。transform:rotate(0deg);这一句写上之后会影响后面的hover。

2017-10-12 19:21:37