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的更多相关文章

  1. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  2. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  3. 对CSS3中的transform:Matrix()矩阵的一些理解

    只要有CSS基础的人肯定都知道,我们可以通过transform中的translate,scale,rotate,skew这些方法来控制元素的平移,缩放,旋转,斜切,其实这些方法呢都是为了便于开发者使用 ...

  4. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  5. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  6. css3中的transform、transition、translate、animation(@keyframes)的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  7. css3中有关transform的问题

    Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等.

  8. CSS3中的transform转换属性

    属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...

  9. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

随机推荐

  1. qualcomm platform camera porting

    转载自http://www.cnblogs.com/thjfk/p/4086001.html camera基本代码架构 Camera原理:外部光线穿过lens后,经过color filter滤波后照射 ...

  2. allegro

    ALLEGRO5的渲染部分低层使用了opengl或d3d加速.

  3. 利用ACE 自己实现的线程池

    1: 线程池组件的配置文件: [log] ;DEBUG = 0 ;INFO = 1 ;WARN = 2 ;FAULT = 3 level=0 ;SCREENOUT = 0 ;FILEOUT = 1 ; ...

  4. 字符串匹配之KMP算法

    KMP算法使用前缀函数来模拟有限自动机的后缀函数,前缀函数通过计算模式与其自身的偏移匹配的信息,本身的证明很复杂,关键在于弄懂其核心思想,下面就不赘述了,仅仅贴出代码: #include <io ...

  5. Mybatis上路_05-使用命令行自动生成

    http://my.oschina.net/vigiles/blog/125127 目录[-] 1.数据准备: 1)建库: 2)建表: 3)预设数据: 2.编写Generator执行配置文件: 3.搭 ...

  6. JBPM学习(六):详解流程图

    概念: 流程图的组成: a. 活动 Activity / 节点 Node b. 流转 Transition / 连线(单向箭头) c. 事件 1.流转(Transition) a) 一般情况一个活动中 ...

  7. SYNONYMS

    SQL> SELECT * FROM V$VERSION WHERE ROWNUM=1; BANNER --------------------------------------------- ...

  8. mysql 源代码学习 博客 [lock..]

    http://blog.chinaunix.net/uid/28364803/cid-168292-list-1.html

  9. .NET技术-.NET各大网站-编程技术网址

    Source Code: http://www.codeproject.com/ The Code Projecthttp://www.tomore.com/ 中 国盟动力http://www.cod ...

  10. UDID

    大多数应用都会用到苹果设备的UDID号,UDID通常有以下两种用途: 1)用于一些统计与分析目的:[第三方统计工具如友盟,广告商如ADMOB等] 2)将UDID作为用户ID来唯一识别用户,省去用户名, ...