CSS3中的transform
CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
transform 在2D里主要是4个方法。除了rotate 其他都是接受x y值
- translate
- skew
- rotate
- scale
Translate:元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)
transform: translate(100px, 50px);
Skew:x,y有分别的方法。 x 变化就是左右的倾斜 x 变化是 上下的倾斜
skewX(10deg) skewY(80deg);
rotate:旋转,容器整体的旋转,和skew不同,形状是没变化的,是指旋转角度
transform: rotate(30deg);
Scale:缩放,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
transform: skew(30deg,20deg);
matrix() : matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
transform:matrix(,);
Transform Origin:上面那些效果都是 以容器的中心,对角线交点为中心进行的 倾斜 旋转 放大
也就是 transform-origin: 50% 50%
CSS3中的transform的更多相关文章
- CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...
- CSS3中的transform变形
在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...
- 对CSS3中的transform:Matrix()矩阵的一些理解
只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- css3中trastion,transform,animation基本的了解
毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...
- css3中的transform、transition、translate、animation(@keyframes)的区别
一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...
- css3中有关transform的问题
Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等.
- CSS3中的transform转换属性
属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
随机推荐
- qualcomm platform camera porting
转载自http://www.cnblogs.com/thjfk/p/4086001.html camera基本代码架构 Camera原理:外部光线穿过lens后,经过color filter滤波后照射 ...
- allegro
ALLEGRO5的渲染部分低层使用了opengl或d3d加速.
- 利用ACE 自己实现的线程池
1: 线程池组件的配置文件: [log] ;DEBUG = 0 ;INFO = 1 ;WARN = 2 ;FAULT = 3 level=0 ;SCREENOUT = 0 ;FILEOUT = 1 ; ...
- 字符串匹配之KMP算法
KMP算法使用前缀函数来模拟有限自动机的后缀函数,前缀函数通过计算模式与其自身的偏移匹配的信息,本身的证明很复杂,关键在于弄懂其核心思想,下面就不赘述了,仅仅贴出代码: #include <io ...
- Mybatis上路_05-使用命令行自动生成
http://my.oschina.net/vigiles/blog/125127 目录[-] 1.数据准备: 1)建库: 2)建表: 3)预设数据: 2.编写Generator执行配置文件: 3.搭 ...
- JBPM学习(六):详解流程图
概念: 流程图的组成: a. 活动 Activity / 节点 Node b. 流转 Transition / 连线(单向箭头) c. 事件 1.流转(Transition) a) 一般情况一个活动中 ...
- SYNONYMS
SQL> SELECT * FROM V$VERSION WHERE ROWNUM=1; BANNER --------------------------------------------- ...
- mysql 源代码学习 博客 [lock..]
http://blog.chinaunix.net/uid/28364803/cid-168292-list-1.html
- .NET技术-.NET各大网站-编程技术网址
Source Code: http://www.codeproject.com/ The Code Projecthttp://www.tomore.com/ 中 国盟动力http://www.cod ...
- UDID
大多数应用都会用到苹果设备的UDID号,UDID通常有以下两种用途: 1)用于一些统计与分析目的:[第三方统计工具如友盟,广告商如ADMOB等] 2)将UDID作为用户ID来唯一识别用户,省去用户名, ...