transform 属性小解
css中transform包括三种: 旋转rotate(), translate()移动, 缩放scale(), skew()扭曲以及矩形变换matrix()
语法:
transform: none | <transform-function> [ <transform-function> ]*
transform: rotate | translate | scale | skew | matrix
注解: none: 表示不进行变换
<transform-function>表示可以多个变化叠加,彼此之间用空格隔开
适用范围:块级元素和内联元素均可使用
兼容性写法:
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera*/
------------------------------------------------------------------------------------------------
旋转:
1.rotate(a) (绕着旋转中心2D旋转)
参数是角度,单位是deg,不进行变换则为none
旋转中心:默认是对象正中心,可通过transform-origin来定义
兼容性: 均支持
eg:rotate(5deg)顺时针5度 rotate(-10deg)逆时针10度
2.rotateX(a) (绕着X轴3d旋转)
IE, opera不支持
3.rotateY(a) (绕着Y轴3d旋转)
IE, opera不支持
-----------------------------------------------------------------------------------------------------
位置变换:
1.translate(x,y)(2D位置变化)
单位可为px,em,rem和%
若未提供y则默认y为0,基点默认对象中心,可通过transform-origin改变
兼容性:均支持
2.translateX()在X轴方向上进行位置变换
3.translateY()在Y轴方向上进行位置变换
-------------------------------------------------------------------------------------------------------
缩放:
1.scale(x, y)
x,y为数字,缩放的比例
若未提供y则默认与x轴的缩放比例一样,可改变基点
兼容性:均支持
2.scaleX()
只在X轴方向上进行缩放
兼容性:均支持
3.scaleY()
只在X轴方向上进行缩放
兼容性:均支持
--------------------------------------------------------------------------------------------------------
拉伸:
1.skew(x, y)
单位是deg,在x,y轴方向上进行拉伸
若未提供y则默认为0
2.skew(x)
3.skew(y)
均兼容性良好
-----------------------------------------------------------------------------------------------------------
矩阵变换:
matrix(涉及数学上的矩阵,应用面小,此处先不做解释)
详情可参考:http://www.w3cplus.com/content/css3-transform
transform 属性小解的更多相关文章
- 图层的transform属性
Main.storyboard // // ViewController.m // 7A11.图层的transform属性 // // Created by huan on 16/2/4. // ...
- 通过transform属性改变图片的位置大小等信息
对UIImageView的位置大小方向的改变可以通过改变其transform属性值实现. 位置改变: var transform = CGAffineTransformMakeTranslation( ...
- 2016 - 1- 14 UI阶段学习补充 transform属性详解
UIView的transform属性 transform是view的一个重要属性,它在矩阵层面上改变view的显⽰状态,能实现view的缩放.旋转.平移等功能.transform是CGAffineTr ...
- transform属性
transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置”的形变 CGAffin ...
- 理解SVG坐标系统和变换: transform属性
SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...
- Swift - 通过设置视图的transform属性实现动画
设置视图对象的transform属性,可以实现各种动画效果. 1,移动 指在同一平面内,将控件按照某个直线方向平移一定的距离. 1 2 3 4 5 //每次都从当前位置平移 self.imageVie ...
- 11--tag 和transform属性
tag 和transform属性 1.tag 标签,就相当于身份识别的标码,可以通过tag值获取对应的对象. 2.使用transform 实现对象的平移和旋转. // // ViewControlle ...
- IOS(二)基本控件UIButton、简易动画、transform属性、UIImageView
UIButton //1.设置UIButton 的左右移动 .center属性 获得 CGPoint 来修改x y //1.设置UIButton 的放大缩小 bounds属性 获得CGRect 然后通 ...
- animation,transform属性
animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...
随机推荐
- transform translate transition 的区别
transform是变形,下面有translate transform: rotate旋转/scale缩放/skew扭曲/translate移动/matrix矩阵变形transform连写:rotat ...
- iOS开发The Operation couldn't be completed.(LaunchServicesError error 0.)的解决方法
显示错误:The Operation couldn't be completed.(LaunchServicesError error 0.)解决办法:第1种方法.点击当前的模拟器,点击IOS Sim ...
- 《JS权威指南学习总结--8.8.4 记忆函数》
内容要点: 可以将上次的计算结果缓存起来.在函数式编程当中,这中缓存技巧叫做 "记忆". 需要注意的是,记忆只是一种编程技巧,本质上是牺牲算法的空间复杂度以换取更优的时间复杂度 ...
- Node.js:常用工具util
概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...
- MongoDB数据库基本操作
一.使用数据库 显示所有数据库命令 $ ./mongo MongoDB shell version: connecting to: test > show dbs local .078GB te ...
- kettle连接Hive中数据导入导出(6)
1.hive往外写数据 http://wiki.pentaho.com/display/BAD/Extracting+Data+from+Hive+to+Load+an+RDBMS 连接hive
- [ An Ac a Day ^_^ ] [kuangbin带你飞]专题四 最短路练习 POJ 2387 Til the Cows Come Home
求1到N的最短路 注意有重边 跑一遍dijkstra就行 /* *********************************************** Author :Sun Yuefeng ...
- Gentoo启动菜单设置:使用官方LiveDVD Grub主题
设置Gentoo Grub启动主题 拷贝官方LiveDVD grub主题: 下载官方DVD,找到 /boot/grub/themes/GenGrub目录,并拷贝出来. 安装GenGrub主题: 将Ge ...
- 小米2s刷机
每次系统内存不足,卡的不行就恨不得马上换新手机,发现手机也没有什么大的毛病,也没有其他苛刻的要求. 换个新系统继续使用吧,除了屏幕小了一点,将就了吧.物尽其责,坚决抵制过度消费. 小米手机2s 16G ...
- 洛谷-三连击(升级版)-BOSS战-入门综合练习1
题目描述 Description 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成A:B:C的比例,试求出所有满足条件的三个三位数,若无解,输出“No!!!”. 输入输出格 ...