对元素进行移动。缩放。转动。拉长 或 拉伸
  
    全部都需要加前缀。

Transform-2D转换方法:rotate()旋转、scale()缩放、skew()扭曲/倾斜、translate()位移、matrix()矩形变形、

  rotate(angle):通过角度参数指定一个2D旋转,在参数中规定角度。

  skew(x-angle,y-angle):倾斜,沿着X和Y轴。
    skewX(angle):沿着X轴。
    skewY(angle):沿着Y轴。

  scale(x,y):转换,改变元素的宽高。
    scaleX(n):改变元素宽。
    scaleY(n):改变元素高。

  translate(x,y):转换,沿着X和Y轴移动元素。
    translateX(n):沿着X轴移动元素。
    translateY(n):沿着Y轴移动元素。

  matrix(n,n,n,n,n,n):转换,使用6个值的矩形,较为复杂,不常用。

DEMO

CSS3-transform,2D动画实例的更多相关文章

  1. 【CSS3练习】transform 2d变形实例练习

    transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...

  2. css3 transform做动画

    css3 transform做动画第一种用关键帧 这里就不说了 就说第二种方法用 transition属性 ps:1jquery anim不支持transform动画 但css还是支. 2 css3关 ...

  3. 14:CSS3 渐变(gradient)与 过度(transition)、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  4. 【学+原】CSS3的2D动画 ——仿NOMOS手表

    看CSS3妙味课堂中有一课是介绍如何做钟表界面,然后三根针都能随着时间转动,然后自己在那个简易的版本上做了一些进一部改进. 最关键的知识点应该是transform-origin这个样式,要选对旋转的中 ...

  5. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

  6. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  7. css3 matrix 2D矩阵和canvas transform 2D矩阵

    一看到“2D矩阵”这个高大上的名词,有的同学可能会有种畏惧感,“矩阵”,看起来好高深的样子,我还是看点简单的吧.其实本文就很简单,你只需要有一点点css3 transform的基础就好. 没有前戏,直 ...

  8. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  9. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

随机推荐

  1. Tomcat server.xml配置

    参考文献:http://www.cnblogs.com/xdp-gacl/p/3734395.html 一.Tomcat配置虚拟主机 方法:在conf/server.xml里配置Host元素,其中na ...

  2. NAT穿透解决方案介绍

    最近公司要实现在各种网络环境下面的多屏互动(机顶盒.android phone.iphone及PC端)的需求:由于IP地址资源有限的原因,目前我们使用的各种终端设备都位于局域网后面也就是多台设备共享同 ...

  3. Centos7.X 源码编译安装subversion svn1.8.x

    说明:SVN(subversion)的运行方式有两种:一种是基于Apache的http.https网页访问形式:还有一种是基于svnserve的独立服务器模式.SVN的数据存储方式也有两种:一种是在B ...

  4. Qt5+VS2012编程

    安装配置 http://www.bogotobogo.com/Qt/Qt5_Visual_Studio_Add_in.php Qt5+GL http://qt-project.org/doc/qt-5 ...

  5. Sky Box

    http://www.keithlantz.net/2011/10/rendering-a-skybox-using-a-cube-map-with-opengl-and-glsl/ http://o ...

  6. sqlmap的一些小技巧

    前言 很多人都使用sqlmap来进行SQL注入测试,但是很多人只是简简单单的current-user,current-db,-D,-T,--dump这样子来做,其实sqlmap还有很多很强大的功能,这 ...

  7. 安装CentOS7重启后提示License information

    Initial setup of CentOS Linux (core) ) [x] Creat user ) [!] License information (no user will be cre ...

  8. RabbitMQ service is already present - only updating service parameters

    如果你安装RabbitMQ不是那么一番顺利..那么你有可能会重装多次.. So..问题来了..重装时你执行   rabbitmq-service install  的时候..有可能就会报这个错了.. ...

  9. webservice报错Message part refundRequest was not recognized. (Does it exist in service WSDL?)

    最近在做一个支付的接口. 因为接口方使用webservice交互.  我只能去学习了下webservice 现在出了一个很古怪的问题~  我在请求他们url的时候, 返回给我找不到控制名错误 Mess ...

  10. android自定义控件(5)-实现ViewPager效果

    对于系统的ViewGroup我们已经是十分熟悉了,最常用的LinearLayout和RelativeLayout几乎是天天要打交道,下面我们就来看看,如何一步一步将其实现: 一.首先当然也是最通常的新 ...