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. golang string、int、int64 float 互相转换

    #string到int int,err := strconv.Atoi(string) #string到int64 int64, err := strconv.ParseInt(string, 10, ...

  2. Java中for each与正常for循环效率对比

    循环ArrayList时,普通for循环比foreach循环花费的时间要少一点:循环LinkList时,普通for循环比foreach循环花费的时间要多很多. 当我将循环次数提升到一百万次的时候,循环 ...

  3. LeetCode 34. 搜索范围（search for a range）

    题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值 ...

  4. docker —宝塔面板

    下载个单独的系统镜像 [root@git opt]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE docker.io/nginx-tomcat ...

  5. PHP 页面中实现数据的增删改查

    main页面(主页面) <table width="100%" border="1" cellpadding="0" cellspac ...

  6. Linux搭建Samba共享服务器

    实验要求: Samba文件共享服务配置与访问,配置访问用户以及相应权限. Tips:创建共享目录/test和/share,并且分别在/test下创建文件tf1(只读)tf2(读写)  在/share ...

  7. http协议详解1

    一.http协议url组成部分详解:1.协议类型2.ip(服务器地址)3.port(或域名)4.path(请求资源所在地址)5.?(资源地址与参数的分割符合)6.参数(请求参数)7.&(多个参 ...

  8. docker run 和 docker exec 的差异

    docker run 和 docker exec 的差异 docker run :根据镜像创建一个容器并运行一个命令,操作的对象是 镜像: docker exec :在运行的容器中执行命令,操作的对象 ...

  9. MySQL 创建函数报错 This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creators

    问题描述 通过Navicat客户端,创建MySQL函数(根据的当前节点查询其左右叶子节点)时报错,报错信息如下: This function has none of DETERMINISTIC, NO ...

  10. django 视图常用操作

    获取参数. 类型是QueryDict https://www.cnblogs.com/zhaoyang-1989/p/11989515.html request.POST.get('参数名') req ...