css3 翻转和旋转的差别
css3 旋转 差别 翻转
2023-09-14 09:10:28 时间
我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了。
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 position fixed居中的问题
- H5+JS+CSS3 综合应用
- Js点击触发Css3的动画Animations、过渡Transitions效果
- css3随着外层包裹的旋转里面的图标为正
- css3半圆
- css3旋转动画
- 第八十二节,CSS3过渡效果
- 第七十九,CSS3背景渐变效果
- webpack插件自动加css3前缀
- 纯CSS3编写的面包屑导航收集
- [CSS3] The different of Background-size between 'cover' and 'contain'
- [CSS3] Parent relative and child absoulte
- CSS3 图片旋转
- CSS3鼠标悬停360度旋转效果
- 航海王_html_css3_旋转效果demo
- 【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
- 【CSS3】CSS3 属性选择器 ( CSS3 简介 | 属性选择器 | 属性选择器权重 )
- HTML5 CSS3专题 纯CSS打造相冊效果
- css3 翻转和旋转的差别
- [HTML5&CSS3]Transform具体解释
- CSS3转换属性—transform之translate、rotate、scale函数详解
- 【CSS3】---- 纯 css 控制 html5旋转音乐图标,控制背景音乐
- CSS3逐帧动画与补帧动画实现图片轮播效果
- CSS3设置按钮的样式