微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

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

php中文网
发布： 2016-06-21 09:45:38
原创
1944人浏览过

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...透明那属性。。

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：请问css中BACKGROUND属性图片后面ver=2是什么意思_html/css_WEB-ITnose 下一篇：HTML图片切换和文字滚动互相影响了。。。_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Linux用Caddy服务器一键HTTPS运行HTML+CSS项目 Caddy可一键部署HTML+CSS项目并自动启用HTTPS。1.通过官方脚本安装Caddy；2.将网页文件放入/var/www/mywebsite并设权限；3.编辑/etc/caddy/Caddyfile配置域名与根目录；4.重启Caddy，域名解析生效后自动获取SSL证书并开启HTTPS访问。
2025-11-16 15:49:02
686
如何通过HTML标签实现表单设计的详细步骤 答案是使用标签定义表单，结合input、label、fieldset等语义化标签组织结构，通过action和method设置提交方式，并用label的for属性关联输入控件以提升可访问性。
2025-11-16 15:47:02
539
html滚动条左右箭头怎么隐藏_html滚动条箭头隐藏与样式调整方法 在网页开发中，有时默认的滚动条样式会影响页面美观，特别是左右滚动条的箭头部分。我们可以通过CSS来自定义或隐藏这些箭头，提升整体视觉效果。以下介绍如何隐藏HTML滚动条的左右箭头，并进行样式调整。隐藏滚动条箭头的原理浏览器默认的滚动条样式由操作系统控制，但在Webkit内核浏览器（如Chrome、Edge、Safari）中，可以通过伪元素选择器对滚动条进行深度定制。主要使用::-webkit-scrollbar系列伪类来操作。要隐藏左右滚动条的箭头，关键是针对水平滚动条的前后箭头部分进行样式设置
2025-11-16 15:35:35
354
rofi菜单一键生成HTML+CSS完整项目结构！ 答案：通过Shell脚本与rofi集成实现HTML+CSS项目一键创建。首先编写脚本生成包含css、js、images目录及基础文件的项目结构，并填充默认HTML内容；接着创建rofi菜单脚本，提供web、blog、dashboard等选项，调用对应项目生成逻辑；最后配置模板预设，在主脚本中添加模板选择功能，利用rofi列出~/templates中的HTML模板并复制到新项目中，实现多场景快速初始化。
2025-11-16 15:21:06
129
如何通过Sublime Text配置HTML自动完成的详细步骤 启用自动补全、安装Emmet插件、配置Tab键触发和自定义代码片段可显著提升SublimeText中HTML编码效率，具体步骤包括开启auto_complete与auto_match_enabled选项，通过PackageControl安装Emmet，绑定expand_abbreviation_by_tab命令，并创建如art生成article标签的Snippet。
2025-11-16 15:06:06
825
Mac用Übersicht桌面小部件显示HTML标签速查 首先安装配置Übersicht，创建html-cheatsheet.widget文件夹并编写index.html，用HTML与CSS列出常用标签，最后在Übersicht中启用小部件并调整位置，实现在Mac桌面实时查看HTML速查信息。
2025-11-16 14:37:53
731
网页滚动条滚动条怎么添加阴影效果_html滚动条阴影样式设置教程 答案：通过CSS的::-webkit-scrollbar伪元素可为滚动条添加阴影效果，首先定义滚动条各部分基础样式，再为thumb滑块添加inset内阴影增强立体感，也可为track轨道设置内阴影以突出层次，最终在WebKit浏览器中实现美观且具现代感的自定义滚动条。
2025-11-16 14:37:02
158
html网页如何下载_HTML网页（整页/源码）下载保存方法 可通过浏览器另存为完整网页或复制源码保存HTML文件，02.使用开发者工具获取动态渲染后的页面结构，03.用curl或wget命令行工具批量下载，适合自动化备份，需注意版权合规。
2025-11-16 14:10:03
325
Linux脚本双开神器，HTML+CSS分屏改到飞！ 首先通过Shell脚本启动两个独立Firefox实例实现双开，再利用HTML+CSS构建左右分屏界面，最后结合本地服务器与浏览器全屏模式一键打开定制化分屏工作环境。
2025-11-16 14:07:03
410
React 中限制字符串显示的字数：截断过长文本并添加省略号 本教程介绍如何在React应用中限制字符串显示的字数，特别是针对产品描述等长文本，通过JavaScript函数截取指定数量的单词，并在末尾添加省略号，从而保证页面布局的美观和信息的可读性。
2025-11-16 12:52:36
523
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部