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

代码样式如下：

test

@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;}

页面显示如图

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