CSS3过渡作业问题

来源:3-1 transition简写

慕用7568027

2017-03-28 11:37:27

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

        }

        /*此处写代码*/

        div:hover{

            transform:rotate(360deg);

            transform:scale(4);

            transition: 2s ease-in-out 1s;

            -webkit-transition: 2s ease-in-out 1s;


        }

    </style>

</head>

<body>

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

</body>

</html>



只放大 不旋转

写回答

2回答

慕粉1469424724

2017-04-20

将rotatehe和scale属性写在一起第一个div里写成transform:rotate(0deg) scale(1,1);

第一个div里写成transform:rotate(360deg) scale(4,4);就可以了,就是transform的复合缩写模式,rotate和scales属性中间空格,

还有你transition里忘记写property属性名称了,要加上transform属性,指明你过渡的是transform属性

0

慕用7568027

提问者

2017-03-28

transform:rotate(0deg) scale(1);

0

0 学习 · 5760 问题

查看课程