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%{ } ...
随机推荐
- Sass入门:第四章
1.加法 加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的CSS: .box { width: 788px; } ...
- POJ 2068 Nim#双人dp博弈
http://poj.org/problem?id=2068 #include<iostream> #include<cstdio> #include<cstring&g ...
- Cmake常用指令
1. cmake_minimum_required(VERSION 2.8) 检查cmake的版本,至少为2.8 2. project(helloworld) ...
- 越狱开发-创建真正的后台程序(Daemon Process)
在网上搜索了一下如何在IOS上面实现Daemon Process,只有chrisalvares的博客中有过详细的描述,但是其博客中描述的较为复杂, 参考stackoverflow中的一个问答: htt ...
- 理解 Storm 拓扑的并行度(parallelism)概念
组成:一个运行中的拓扑是由什么构成的:工作进程(worker processes),执行器(executors)和任务(tasks)! 在一个 Storm 集群中,Storm 主要通过以下三个部件来运 ...
- SecureCRT - 使用方法和技巧
1. 保活防掉线选项 -> 会话选项 -> 终端勾选 自动重新连接, 发送协议 NO-OP 每60秒 2. 拷贝与粘贴的设置选项 -> Global options -> Te ...
- 放弃阿里云主机,选择高性价比Vultr VPS免备案
阿里云主机ECS推广多年后,质量有所改善,但我依然强烈不推荐阿里云主机.考虑性价比带宽速度等因素后,我推荐的vps品牌有vultr和digitalocean,还有大名鼎鼎的linode,是中国用户的最 ...
- Spring 中,对象销毁前执行某些处理的方法
通过 @PreDestroy 和 bean 中配置 destroy-method 实现该功能 java 代码中: 1: public class TestClass { 2: private Sche ...
- poj1256(全排列stl)
#include<stdio.h>#include<string.h>#include<algorithm>using namespace std;bool cmp ...
- python-连接数据库
from sqlalchemy import create_engine,text,Column,Integer,String,Sequencefrom sqlalchemy.ext.declarat ...