首页 > 大家看看这个,为什么在旋转后就出现了边框?关于 transform:rotate()的

大家看看这个,为什么在旋转后就出现了边框?关于 transform:rotate()的

代码样式如下:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8" />
<style type="text/css">
@charset "utf-8";
/* CSS Document */

html,body,div,span,a,img,form,p,h1,h2,h3,h4,h5,ul,dl,dt,dd,li {margin:0;padding:0;}
html,body{width:100%;min-height:100%;font-size:16px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei";background-color:#ffffff;}
ul,li{list-style:none;}
li{list-style-type:none;}
img {border:0;vertical-align:bottom;}
input,button,select,textarea{margin:0;padding:0;outline:none;border:none;background:none;resize:none;border-radius:0;-webkit-border-radius:0;appearance: none; -webkit-appearance: none;}
input[type="submit"],input[type="reset"],input[type="button"],button{-webkit-appearance:none;}
input[type=radio]{-webkit-appearance:radio;}
input[type=checkbox]{-webkit-appearance:checkbox;}
input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only;}
a,a:focus,input,input:focus{text-decoration:none;border:none;outline:none;-webkit-tap-highlight-color:rgba(255, 255, 255, 0);-webkit-focus-ring-color: rgba(0, 0, 0, 0);}
i,h1,h2,h3,h4,h5{font-style:normal;font-weight:normal;font-size:16px;}

#container{width:100%;height:100%;overflow:hidden;background:#fff;}
.box{width:100%;min-height:1000px;overflow:hidden;padding:100px 0;}
.box > div{margin:50px auto;}

.y{width:200px;height:200px;background:#ff0000;position:relative;
    transform:rotateZ(60deg);
    -webkit-transform:rotateZ(60deg);
    -moz-transform:rotateZ(60deg);
    -ms-transform:rotateZ(60deg);
}
.y1{width:200px;height:200px;background:#ff0000;position:relative;
    transform:rotateZ(0deg);
    -webkit-transform:rotateZ(0deg);
    -moz-transform:rotateZ(0deg);
    -ms-transform:rotateZ(0deg);
}
.y .suby,.y1 .suby{width:200px;height:100px;background:#ffffff;position:absolute;bottom:0;left:0;}

</style>
</head>
<body>
<section id="container" class="clearfix">
    <div class="box">
        <div class="y">
            <div class="suby"></div>
        </div>
        <div class="y1">
            <div class="suby"></div>
        </div>
    </div>
</section>
</body>
</html>

页面显示如图


能告诉我这是什么原因吗?


这个应该和浏览器的渲染机制有关系

【热门文章】
【热门文章】