css3 翻转和旋转的差别
css3 旋转 差别 翻转
2023-09-14 09:08:11 时间
我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了。
css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性是:rotate,scale,skew,translate
旋转:(rotate)
-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);翻转:(scale)
(这个属性是放缩的功能,怎么能翻转的!原来括弧里面(1,1)前者表示X轴,后者表示Y轴,当数字大于1时放大,大于0并小于1时缩小,负数代表翻转)
水平翻转:
-webkit-transform:scale(-1,1); -moz-transform:scale(-1,1); transform:scale(-1,1);垂直翻转:
-webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); transform:scale(1,-1);
參考一位非常厉害师兄(@桑尼真)的博客:http://blog.sina.com.cn/s/blog_74d6cedd0100v9bk.html
相关文章
- 常用的CSS3选择器
- CSS3与页面布局学习总结(四)——页面布局的多种方法
- 利用css3写一个旋转木马
- HTML5 新特性_CSS3新特性
- 从浅到深的学习 CSS3阴影(box-shadow)
- CSS3 代码生成工具:Create CSS3
- TideSDK:使用 HTML5, CSS3 和 JavaScript 创建多平台的桌面应用
- 【CSS3】CSS3 2D 转换 - rotate 旋转 ② ( 使用 rotate 旋转绘制三角形 )
- 【CSS3】CSS3 2D 转换 - rotate 旋转 ( transform: rotate(90deg) 旋转样式 | transition 过度效果设置 )
- CSS3 边框详解编程语言
- 纯CSS3实现旋转木马详解编程语言
- CSS3 滤镜Filter亮度动画详解编程语言
- css3自定义上传图片输入框的方法详解编程语言
- CSS3 2D转换
- CSS3 3D转换
- CSS3 多列样式
- CSS3 使用变量
- 7款风格新颖的jQuery/CSS3菜单导航分享
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- jquery+css3打造一款ajax分页插件(自写)