>웹 프론트엔드 >HTML 튜토리얼 >css3 3d旋转 出现锯齿_html/css_WEB-ITnose

css3 3d旋转 出现锯齿_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 09:45:381664검색

CSS3 3D

在做css3的效果的时候
碰到要整体进行偏转的问题
以为很简单
但是做出来的时候出现问题

#contant
{
    width:1000px;
    height:768px;    
    margin:0 auto;
    perspective:1000px;
    -webkit-perspective:1000px;

}
header
{
    width:800px;
    height:60px;
    border:1px solid #f00;
    background-color:#666;
    transform:rotateY(3deg);
}

比如这样
在我进行偏转过后,边框出现锯齿,
我需要的是进行3D偏转,请问有没有办法可以解决

回复讨论(解决方案)

.css3{width:800px;height:60px;border:1px solid #f00;background-color:#666;transform:rotate(3deg);-ms-transform:rotate(3deg); /* Internet Explorer */-moz-transform:rotate(3deg); /* Firefox */-webkit-transform:rotate(3deg); /* Safari 和 Chrome */-o-transform:rotate(3deg); /* Opera */}

1.写单一属性的CSS是不兼容的;
2.[3deg]把动画拆分到某一度,自然会出现锯齿.

.css3{width:800px;height:60px;border:1px solid #f00;background-color:#666;transform:rotate(3deg);-ms-transform:rotate(3deg); /* Internet Explorer */-moz-transform:rotate(3deg); /* Firefox */-webkit-transform:rotate(3deg); /* Safari 和 Chrome */-o-transform:rotate(3deg); /* Opera */}

1.写单一属性的CSS是不兼容的;
2.[3deg]把动画拆分到某一度,自然会出现锯齿.
呵呵 ,我已经解决了,我知道浏览器兼容的问题
现在是再试验阶段,到时候会写满的

解决办法是,背景用图片,然后加上一句,border:1px solid transfor...透明那属性。。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.