新的转换属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3

2D Transform 方法

matrix(n,n,n,n,n,n)

定义 2D 转换,使用六个值的矩阵。

translate(x,y)

定义 2D 转换,沿着 X 和 Y 轴移动元素。

translateX(n)

定义 2D 转换,沿着 X 轴移动元素。

translateY(n)

定义 2D 转换,沿着 Y 轴移动元素。

scale(x,y)

定义 2D 缩放转换,改变元素的宽度和高度。

scaleX(n)

定义 2D 缩放转换,改变元素的宽度。

scaleY(n)

定义 2D 缩放转换,改变元素的高度。

rotate(angle)

定义 2D 旋转,在参数中规定角度。

skew(x-angle,y-angle)

定义 2D 倾斜转换,沿着 X 和 Y 轴。

skewX(angle)

定义 2D 倾斜转换,沿着 X 轴。

skewY(angle)

定义 2D 倾斜转换,沿着 Y 轴。

Css3中的变形与动画的更多相关文章

  1. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  2. 第8章 CSS3中的变形与动画(上)

    变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...

  3. 第9章 CSS3中的变形与动画(下)

    Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号" ...

  4. CSS3中的变形与动画(二)

    CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...

  5. CSS3中的变形与动画(一)

    CSS3变形篇 旋转rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中 ...

  6. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  7. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  8. CSS3 过渡、变形和动画

    一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...

  9. CSS3中的过渡、动画和变换

    一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...

随机推荐

  1. Bootstrap 路径分页标签和徽章组件

    一.路径组件 路径组件也叫做面包屑导航. //面包屑导航 <ol class="breadcrumb"> <li><a href="#&qu ...

  2. Java 并发:Executors 和线程池

    让我们开始来从入门了解一下 Java 的并发编程. 本文主要介绍如何开始创建线程以及管理线程池,在 Java 语言中,一个最简单的线程如下代码所示: Runnable runnable = new R ...

  3. node.js的exprots工厂模式

    工厂类: /** * Created by zzq on 2015/5/15. */ module.exports = function(){ this.getProduct = function() ...

  4. Largest Number || LeetCode

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX 1000 int cm ...

  5. 经常在eclipse中导入web项目时,出现转不了项目类型的问题,导入后就是一个java项目。

    1.在eclipse的项目上点右键,刷新项目.2.在项目上点右键,进入属性(properties)3.在左侧列表项目中点击选择“Project Facets”,在右侧选择“Dynamic Web Mo ...

  6. ArcGIS Engine开发之旅07---文件地理数据库、个人地理数据库和 ArcSDE 地理数据库中的栅格存储加以比较 、打开栅格数据

    原文:ArcGIS Engine开发之旅07---文件地理数据库.个人地理数据库和 ArcSDE 地理数据库中的栅格存储加以比较 .打开栅格数据 对文件地理数据库.个人地理数据库和 ArcSDE 地理 ...

  7. LightOj 1138 - Trailing Zeroes (III) 阶乘末尾0的个数 & 二分

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1138 题意:给你一个数n,然后找个一个最小的数x,使得x!的末尾有n个0:如果没有输出 ...

  8. Top Five Communication Skills for Project Managers

    Research among project managers globally identifies top communication skills for leading teams. Lead ...

  9. Windows下使用Git和GitHub.com

    1.首先介绍一下什么是Git和GitHub       Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.在推出后,Git在其它项目中也取得了很大 ...

  10. iOS 并发编程之 Operation Queues

    现如今移动设备也早已经进入了多核心 CPU 时代,并且随着时间的推移,CPU 的核心数只会增加不会减少.而作为软件开发者,我们需要做的就是尽可能地提高应用的并发性,来充分利用这些多核心 CPU 的性能 ...