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. XStream详解

    XStream的作用 XStream可以把JavaBean对象转换成XML! 通常服务器向客户端响应的数据都是来自数据库的一组对象,而我们不能直接把对象响应给客户端,所以我们需要把对象转换成XML再响 ...

  2. 使用tensorflow.data.Dataset构造batch数据集(具体用法在下一篇博客介绍)

    import tensorflow as tf import numpy as np def _parse_function(x): num_list = np.arange(10) return n ...

  3. docker-compose部署zk和kafka

    version: '3.4' services: zk1: image: zookeeper restart: always hostname: zk1 container_name: zk1 por ...

  4. Orchestrator MySQL主库故障切换的几种类型

    Orchestrator 对MySQL主库的故障切换分为自动切换和手动切换. 手动切换又分为recover.force-master-failover.force-master-takeover以及g ...

  5. 阶段3 2.Spring_08.面向切面编程 AOP_4 spring基于XML的AOP-配置步骤

    resources下新建bean.xml文件 xmlns:aop 先配置IOC aop 通知类就是logger.id配置为logAdvice表示日志的通知 梳理流程 首先我们在这有个Service它需 ...

  6. 在Linux上实现Python调用C语言函数

    一般思路 Python中内置ctypes库,需调用c编译成的.so文件来实现函数调用. 假设我们所需调用的c文件名为test.c,文件里有我们需要的函数func(x,y). 将.c文件编译成 .so文 ...

  7. ubuntu修改时间为北京时间

    ubuntu修改时间为北京时间 查看当前时区root@ubuntu:/# date -R修改时区root@ubuntu:/# tzselect复制文件到/etc目录下root@ubuntu:/# cp ...

  8. HDU 1087 Super Jumping! Jumping! Jumping! （动态规划、最大上升子序列和）

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  9. AKKA学习(一)

    AKKA简介 什么是AKKA Akka是一个由Scala编写的,能兼容Sacala和JAVA的,用于编写高可用和高伸缩性的Actor模型框架.它基于了事件驱动的并发处理模式,性能非常的高,并且有很高的 ...

  10. [转帖]目标管理的S.M.A.R.T.理念

    目标管理的S.M.A.R.T.理念 https://blog.csdn.net/gehantao/article/details/1593510     目标管理(MBO)是一种管理战略,它使用的是S ...