transform：

　　None不转换。

　　Translate(x,y)通过设置X轴的值进行移动。

　　translateY(y)通过设置Y轴的值进行移动。

　　Scale(x,y)定义2D缩放。

　　ScaleX(x)通过设置X轴来进行缩放。

　　ScaleY(y)通过设置y轴来进行缩放。

　　Rotate(45deg)角度旋转。

　　Rotate(45rad)弧度旋转。

　　Skew(x-angle,y-angle)倾斜。

　　SkewX(angle)沿x轴倾斜。

　　skewY(angle)沿y轴倾斜。

Transform-origin:改变基准点。

　　像素或百分比。

　　x轴：left/right/center

　　y轴：top/bottom/center

3D变形，就是在2D变形的基础上，多了z轴的参数。

9.css3动画-2D/3D变形--trasform的更多相关文章

  1. css3动画 2D 3D transfrom

    2D transform 例如transform: translate(1px,30px); translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当 ...

  2. css3动画2D、3D转换

    css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

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

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

  4. CSS3动画属性：变形(transform)

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

  5. IT兄弟连 HTML5教程 CSS3属性特效 3D变换1

    3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1  3D转换属性 3D的转换方法如表2: 表2  3D转换方法     1  transform-style transform- ...

  6. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  7. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  8. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  9. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

随机推荐

  1. SpringBoot启动时的Banner设置

    Spring Boot程序启动的时候输出的由字符组成的Spring符号并不陌生.这个是Spring Boot为自己设计的Banner: 1. 第一种方式:修改的时候,进行设置,在Application ...

  2. 顺序表栈C语言实现

    /* * SeqStack.h * * Created on: 2019年8月1日 * Author: Administrator */ #ifndef SEQSTACK_H_ #define SEQ ...

  3. LeetCode 74. 搜索二维矩阵（Search a 2D Matrix）

    题目描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入: ma ...

  4. pom文件中的dependencyManagement和dependencies的区别

    dependencies 子项目中,自动继承父项目中的相关依赖 dependencyManagement 只是声明依赖,并不实现引入,因此子项目中需要显示的声明需要用的依赖.如果不在子项目中声明依赖, ...

  5. [Java]使用正则表达式实现分词

    手工分词稍嫌麻烦,不好维护,而利用正则表达式就利索多了.Java提供了java.util.regex.Matcher,java.util.regex.Pattern类来帮助我们实现此功能. 例一:以下 ...

  6. 1.2 Mac下配置maven环境变量

    1.下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.下载Mave ...

  7. 代码实现:取一个整数a从右端开始的4～7位

    import java.util.Scanner; //取一个整数a从右端开始的4-7位. public class Test { public static void main(String[] a ...

  8. Xpath 和Css Selector使用

    Xpath是xml的路径语言,就是通过元素的路径来查找标签元素. Xpath直接在火狐浏览器的firebug中练习,49版本一下的火狐才能用firebug插件. Xpath的使用方法 注://*    ...

  9. LoadRunner 技巧之 自动关联

    LoadRunner 技巧之 自动关联 这一节讲loadunner 关联的问题,其实这个东西理解起来简单,但说起来比较麻烦. 关联的原理:                               ...

  10. Tomcat-8.5.39性能监控及调优

    一.下载地址 https://tomcat.apache.org/download-80.cgi 二.安装步骤 将安装包 apache-tomcat-8.5.39.tar.gz 上传至服务器 /usr ...