问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

设置了transform: scale(-1.2);为什么字会 旋转180度？如何让显示成正常的

头像
北风燕归来
    6921330

    clipboard.png

    设置了transform: scale(-1.2);为什么字会 旋转180度？如何让显示成正常的transform: scale不是缩放吗？ transform:rotate不是旋转吗？transform: scale为什么会旋转呢？
    <!DOCTYPE html>
    <html>
    <head lang="en">

    <meta charset="UTF-8">
<style type="text/css">

    .myButton {

    background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;

    }
    .myButton:hover {

    background-color:#5cbf2a;

    }
    .myButton:active {

    -webkit-transform: scale(-1.2);
transform: scale(-1.2);

    }
    </style>
    </head>

    <body>
    <div width="150" height="30" class="myButton">123</div>
    </body>
    </html>

    html5css
    阅读 6.5k
    4 个回答
    得票最新
    头像
    兔子饿了
      1.3k1311

      直接transform: scale(1.2);就好了，会旋转180度是因为transform: scale(-1.2);是以中心为原点，所有的坐标移动到原来-1.2倍的位置，就等于上下左右都翻转了，看起来的效果就是旋转了。

      头像
      北风燕归来
        6921330

        -webkit-transform: scale(-1.2) rotate(180deg);
        transform: scale(-1.2) rotate(180deg);

        头像
        sukies
          4482612

          你如果只想要背景旋转的话，那背景用：before或者：after元素分离写出来，然后对：before或者：after旋转

          头像
          luckness
            6.2k2216

            把负号去掉：

            -webkit-transform: scale(1.2);
transform: scale(1.2);

            scale的变换矩阵是

            scaleX 0      0
0      scaleY 0
0      0      1

            所以坐标(x, y)旋转之后的坐标是

                       scaleX 0      0
(x, y) * ( 0      scaleY 0 ) = (scaleX * x, scaleY * y)
           0      0      1

            你使用scale(-1.2)，则变换后的坐标是(-1.2 * x, -1.2 * y)，所以看上去除了放大的效果外，还旋转了180度。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题