为什么逆时针复原的时候字是糊的?

为什么逆时针复原的时候字是糊的?

<!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:scale(1,1) rotate(0deg);

            transition:transform 2s ease-in-out;

            /*此处写代码*/

           

        }

        div:hover{transform:scale(2,2) rotate(360deg);

                  transition:transform 2s ease-in-out;

        }

        /*此处写代码*/

       

    </style>

</head>

<body>

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

</body>

</html>


正在回答

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

2回答

scale出现字体模糊的原因是因为放大时造成像素也被放大了。hidden;解决文字变虚的问题,scale3D,X.Y,Z是三维空间的缩放,他会把虚化的重影向后拉伸,因此呈现的是没有虚化掉的字体,因此不建议使用这种方法解决字体虚化的问题,关于scale出现字体模糊的问题,你可以设置backface-visibility: hidden;-webkit-backface-visibility: 来解决。祝学习愉快!

  • 乔巴小白 提问者 #1
    非常感谢!
    2017-09-25 18:21:12
提问者 乔巴小白 2017-09-24 20:56:03

试了一下把scale改成scale3D,X.Y,Z轴都取值好像字就没糊了,老师这是什么原因???

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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