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 ...
随机推荐
- win7怎么显示隐藏文件夹
1. 点击“组织”,再选择“文件夹和搜索选项”命令. 2. 接下来在打开的“文件夹选项”对话框中,单击“查看”,切换到“查看”选项卡中. 3. 然后在下面的“高级设置”区域,取消“隐藏受保护的操作系统 ...
- Java对象的多态性(转型)
多态性在面向对象中主要有两种体现: <1>方法的重载与覆写 <2>对象的多态性 对象的多态性:向上转型:子类对象-->父类对象,向上转型会自动完成 向下转型:父类对象-- ...
- 2012 Theory for Forward Rendering
http://miss-cache.blogspot.com/2012/08/lighting-transparent-surfaces-with_26.html http://aras-p.info ...
- php 生成随机字符串 abcdeft....789
) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = &quo ...
- 第五章:创建DbContext
一.DbContext介绍 DbContext是Entity Framework(EF)操作数据库的上下文网关(接口).我们对数据库的所有操作都是通过DbContext完成的.下面我们将讨论在code ...
- mssql手工注入
判断注入点: 1.数字型 http://www.targer.com/article.aspx?id=1 http://www.targer.com/article.aspx?id=1' http:/ ...
- Python开发【第四篇】:Python基础之函数
三元运算 三元运算(三目运算),是对简单的条件语句的缩写. ? 1 2 3 4 5 # 书写格式 result = 值1 if 条件 else 值2 # 如果条件成立,那么将 “值1” 赋值给 ...
- 小技能——markdown
如果常常要在电脑上写点东西,比如写笔记.做总结.写博客之类的,花一两个小时学会markdown还是很值的. markdown简介 markdown不是某个软件,而是一种标记语言,标记普通文本的格式,以 ...
- windows 杂项
农企amd的Radeon: 蓝宝石-镭 显卡m330只是 m200的马甲版本, nvidia的Geforce: ge: geometry : 几何很强, 精视 radeon倾向于单精度浮点计算很强, ...
- 如何清理WindowsXp的临时文件
软件限制策略中的 "路径规则" 不允许的, 是指在 这个路径中的程序都 不准运行! 这就限制了 : 通常电脑中病毒, 都是通过上网感染病毒的 -> 病毒/恶意软件通过 &qu ...