CSS3-transform,2D动画实例
对元素进行移动。缩放。转动。拉长 或 拉伸

全部都需要加前缀。
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个值的矩形,较为复杂,不常用。

CSS3-transform,2D动画实例的更多相关文章
- 【CSS3练习】transform 2d变形实例练习
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...
- css3 transform做动画
css3 transform做动画第一种用关键帧 这里就不说了 就说第二种方法用 transition属性 ps:1jquery anim不支持transform动画 但css还是支. 2 css3关 ...
- 14:CSS3 渐变(gradient)与 过度(transition)、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
- 【学+原】CSS3的2D动画 ——仿NOMOS手表
看CSS3妙味课堂中有一课是介绍如何做钟表界面,然后三根针都能随着时间转动,然后自己在那个简易的版本上做了一些进一部改进. 最关键的知识点应该是transform-origin这个样式,要选对旋转的中 ...
- CSS3 Transform变形(2D转换)
Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- css3 matrix 2D矩阵和canvas transform 2D矩阵
一看到“2D矩阵”这个高大上的名词,有的同学可能会有种畏惧感,“矩阵”,看起来好高深的样子,我还是看点简单的吧.其实本文就很简单,你只需要有一点点css3 transform的基础就好. 没有前戏,直 ...
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
随机推荐
- BZOJ2827: 千山鸟飞绝
离散化坐标,每个坐标开一棵以鸟的编号为关键字的平衡树.每次插入时打2个标记,同时更新自身.这个方法比较显然,而且好写.正解好像用很迷的方法乱搞了一波,然后用线段树不打标记就做出来了,并不会. trea ...
- ubuntu下JDK的安装
硬盘上有下载好的JDK,直接解压后配置profile环境变量就行 export JAVA_HOME=/usr/lib/jvm/java-8-oracle export JRE_HOME=${JAVA_ ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【六】——实现资源间的关联
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 这一篇文章主要介绍一下资源间的关联——例如在学生和课程之间就存在这样的关联:每一个课程都会有 ...
- 第5章 jQuery对表单、表格的操作及更多应用
本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...
- os模块之popen
想查看当前目录下有哪些东西,可以使用os.popen()方法,代码如下: t = (os.popen("dir")) print(t.read()) #运行结果 C:\python ...
- apt-get整理(草稿)
1.apt-get这种方法下载的东西到哪了 参考网址:http://blog.csdn.net/magic881213/article/details/7692007 http://www.linux ...
- svn强制解锁的几种做法
标签: svn强制解锁 2013-12-16 17:40 12953人阅读 评论(0) 收藏 举报 分类: SoftwareProject(23) 版权声明:本文为博主原创文章,未经博主允许不得转 ...
- [bug] 未能加载文件或程序集“SIPEPS, Version=6.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。系统找不到指定的文件。
摘要 在弄ucma的web项目中总会出现这个问题.尝试了很多方法,最后这样解决了. 解决方案 使web以64位的方式运行.
- fedora各个版本的下载地址archive
archive: ['a:kaiv] she went to the city archive this morning. ==================== === fedora 的下载地址是 ...
- jQuery.Callbacks 源码解读二
一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...