css3 3d旋转 出现锯齿_html/css_WEB-ITnose
程序员文章站
2022-04-26 08:05:46
...
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偏转,请问有没有办法可以解决
1.写单一属性的CSS是不兼容的;
2.[3deg]把动画拆分到某一度,自然会出现锯齿.
1.写单一属性的CSS是不兼容的;
2.[3deg]把动画拆分到某一度,自然会出现锯齿.
呵呵 ,我已经解决了,我知道浏览器兼容的问题
现在是再试验阶段,到时候会写满的
解决办法是,背景用图片,然后加上一句,border:1px solid transfor...透明那属性。。
碰到要整体进行偏转的问题
以为很简单
但是做出来的时候出现问题
#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...透明那属性。。
推荐阅读
-
HTML5 利用CSS3 中的3D 模块绘制一个旋转3D正方体
-
html中css3之3d基本知识点 完成一个立方体的并且让其旋转
-
HTML5 纯CSS3实现正方体旋转3D效果
-
8套迷人精致的CSS3 3D按钮动画_html/css_WEB-ITnose
-
基于CSS3给图片添加旋转背景特效_html/css_WEB-ITnose
-
基于css3的3D立方体旋转特效_html/css_WEB-ITnose
-
CSS3实现的3D旋转效果_html/css_WEB-ITnose
-
css3 正方体旋转_html/css_WEB-ITnose
-
css3相册图片3D旋转展示特效_html/css_WEB-ITnose
-
基于CSS3飘带状3D菜单 菜单带小图标_html/css_WEB-ITnose