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

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

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

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

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

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

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

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

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

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

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

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

  • 提问者 Afflatus扶苏 #1
    那意思是旋转和缩放不能同时使用吗?
    2017-08-15 10:36:32
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

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

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

在线咨询

领取优惠

免费试听

领取大纲

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