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

css3 翻转和旋转的区别 - roucheng

php中文网
发布： 2016-05-20 13:49:01
原创
1443人浏览过

我以前一直以为旋转跟翻转一样，今日自己旋转了好久都发觉跟翻转差一点点，纠结了十几分钟才明白，只能怪自己的立体感太差了。

        css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate

        旋转：（rotate）

<span style="color: #800000;">-webkit-transform:rotate(10deg);  
-moz-transform:rotate(10deg);  
transform:rotate(10deg);  
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 何问起 hovertree.com </span><span style="color: #008000;">*/</span>
登录后复制

   翻转：（scale）

 

立即学习“前端免费学习笔记（深入）”；

       (这个属性是放缩的功能，怎么能翻转的！原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转)

算家云
算家云

高效、便捷的人工智能算力服务平台

算家云 228
查看详情 算家云

       水平翻转：

<span style="color: #800000;">-webkit-transform:scale(-1，1);  
-moz-transform:scale(-1，1);  
transform:scale(-1，1);  
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 何问起 hovertree.com </span><span style="color: #008000;">*/</span>
登录后复制

垂直翻转：

<span style="color: #800000;">-webkit-transform:scale(1，-1);  
-moz-transform:scale(1，-1);  
transform:scale(1，-1);
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 何问起 hovertree.com </span><span style="color: #008000;">*/</span>
登录后复制

在线示例：http://hovertree.com/code/css/css3dxuanzhuan.htm

特效：http://www.cnblogs.com/roucheng/p/texiao.html

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：<meta>标签 - margic 下一篇：div+css3绘制基本图形 - 白色的海
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html5如何插入txt纯文本_html5txt文本嵌入与编码设置【实操】 可通过iframe、fetch+pre、object标签或服务端预处理四种方式在HTML5中显示外部TXT文件，需重点处理字符编码（如UTF-8声明、BOM、响应头）并防范XSS风险。
2025-12-23 18:14:03
473
html5框架怎么设置_HTML5用iframe或div框架集嵌入子页面设框架【设置】 HTML5中嵌入子页面的现代方案有四种：一、用iframe标签直接嵌入，支持安全与可访问性属性；二、用CSSGrid/Flexbox布局配合JavaScript动态加载HTML片段；三、用ShadowDOM封装自定义元素实现样式脚本隔离；四、用object标签嵌入HTML并提供fallback内容。
2025-12-23 18:10:02
720
html5怎么设置半圆_HTML5用border-radius:50%+overflow裁切出半圆形状【设置】 HTML5中创建半圆有五种方法：一、宽高比+border-radius+overflow裁切；二、伪元素+clip-path；三、单边border-radius控制；四、SVG矢量绘制；五、CSSclip-pathpath()函数。
2025-12-23 18:00:11
126
navigator怎么用html5_HTML5用navigator对象查浏览器信息如语言【对象】 可通过navigator对象获取浏览器语言、设备类型、平台信息、地理定位和媒体设备支持：navigator.language/languages返回语言代码；userAgent判断移动设备；platform返回操作系统；geolocation检测定位支持；mediaDevices检查媒体访问能力。
2025-12-23 17:48:09
358
html表格标题如何写_编写HTML表格标题的正确标签【正确】 HTML表格标题必须使用语义化的标签，置于内且在等元素之前；禁用–等非语义标签替代；可通过CSS的caption-side和text-align调整位置与对齐。
2025-12-23 17:45:46
484
html5怎么引用图标_html5用iconfont或img标签引用图标文件显示【引用】 HTML5图标显示异常可因路径错误、引用不当或字体未加载，解决方法包括：一、用iconfont类名引用；二、用Unicode字符引用；三、用img标签引用位图；四、内联SVG图标；五、预加载字体文件。
2025-12-23 17:45:09
725
html中如何旋转图片_HTML实现图片旋转动画效果【动画】 可通过CSStransform配合animation实现图片中心旋转：①用@keyframes定义0°→360°动画并设infinite循环；②用transform-origin调整旋转中心；③用transition实现hover/click触发动态旋转；④用CSS变量动态调控角度与速度；⑤结合JavaScript手势实现移动端拖拽旋转。
2025-12-23 17:35:02
393
怎么设置边框html5_html5用CSS border设元素边框粗细颜色样式【设置】 可通过CSS的border属性为HTML5元素添加边框，包括简写设置、分项控制、单侧边框、圆角效果及图片边框五种方法，需注意兼容性、元素尺寸与属性完整性。
2025-12-23 17:33:20
932
html5如何发光边框_HTML5实现CSS发光边框效果技巧【发光边框】 CSS发光边框有五种实现技巧：一、用box-shadow设0偏移+大模糊半径和rgba色；二、结合outline强化轮廓；三、对不规则元素用filter:drop-shadow()；四、多重box-shadow叠加模拟层次光晕；五、配合:hover与transition实现交互式平滑发光。
2025-12-23 17:27:24
192
如何操作html_操作HTML元素的常用方法【常用】 必须掌握操作HTML元素的五种核心方法：一、通过ID精准获取并修改单个元素；二、通过类名批量操作多个元素；三、用querySelector系列灵活选择任意CSS匹配元素；四、动态创建并插入新元素；五、安全移除或替换现有元素。
2025-12-23 17:27:08
912
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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

  • PHP学习

  • 技术支持

  • 返回顶部