3-2作业题，缩放和旋转不能同时进行

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!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;
            /*此处写代码*/
            
        }
        /*此处写代码*/
       div:hover{
        transform: scale(2,2);
        transform: rotate(360deg);
        transition-duration: 1s;
       }
    </style>
</head>
<body>
    <div>www.imooc.com</div>
</body>
</html>

为什么我这里旋转和缩放不能同时进行，现在只能缩放或者只能旋转，哪里出问题了？

Afflatus扶苏 2017-08-15

源自：CSS3过渡 3-1 transition简写

38

收起

3回答

小丸子爱吃菜 2017-08-17 16:09:58

可以使用复合属性写一起：transform: scale(2,2) rotate(360deg);

浪里白嫖张顺 2017-08-17 11:00:44

楼上别误导别人。。。你写了两个transform，实际上就是把缩放给覆盖掉了，可以把两个写在一起就不冲突了，另外，你如果不在css中div补充transtion属性，在鼠标离开元素的时候就转不回去了

提问者 Afflatus扶苏 #1

明白了，谢谢

2017-08-17 16:37:37

柠檬加草 2017-08-15 10:27:36

其实只需要用一个翻转就可以，至于缩放问题，可以改一下你这个div的width和height以及字体的的尺寸。

提问者 Afflatus扶苏 #1

那意思是旋转和缩放不能同时使用吗？

2017-08-15 10:36:32

相似问题

求助：不会改变小五角形的旋转角度了（是不能再次旋转吗？）

0:56为什么说：：before和：：after不好进行整体的旋转？

为什么没有用继承，却实现了位移的同时，放大旋转

两个问题，三角形选择后为什么会错位，为什么旋转后缩放就失效了

完成缩放手势

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018

参与学习人
提交作业 2198 份
解答问题 5012 个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

本课精华内容

问答作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号