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. 用了 EventBus 不要多用其他的通讯功能

    EventBus是一个Android端优化的publish/subscribe消息总线,简化了应用程序内各组件间.组件与后台线程间的通信.主要功能是替代Intent,Handler,BroadCast

  2. centos文件实时同步inotify+rsync

    我的应用场景是重要文件备份 端口:873,备份端打开即可 下载地址:https://rsync.samba.org/ftp/rsync/src/ 服务端和客户端要保持版本一致 网盘链接:https:/ ...

  3. python3笔记六：for语句

    一:学习内容 for语句 二:for-in语句 1. 格式 for 变量名 in 集合:    语句 2.逻辑 按顺序取集合中的每个元素赋值给变量,再去执行语句,如此循环往复 3.举例 for i i ...

  4. vue2.0 父子组件之间的通信问题

    概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...

  5. 选题 Scrum立会报告+燃尽图 02

    此作业要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8683] 一.小组介绍 组长:贺敬文 组员:彭思雨 王志文 位军营 杨萍 ...

  6. 读取PC版微信数据库(电脑版微信数据库)内容

    原始网址   https://www.cnblogs.com/Charltsing/p/WeChatPCdb.html 1.PC版微信的密钥是32位byte,不同于安卓版(7位字符串) 2.通过OD或 ...

  7. leetcode 166分数到小数

    手动排除特殊情况: 对于一般情况,使用位运算和加减法来计算除法,使用sign记录结果符号:(这部分为leetcode 29题的答案) 使用hashmap来记录循环体出现的开始位置(如果有的话),使用f ...

  8. web开发(七) JSTL标签库

    在网上看见一篇不错的文章,写的详细. 以下内容引用那篇博文.转载于<http://www.cnblogs.com/whgk/p/6432786.html>,在此仅供学习参考之用. 一.为什 ...

  9. 四十三：数据库之SQLAlchemy之group_by和having子句

    group_by:根据某个字段进行分组,比如想要根据年龄进行分组,再统计每一组有多少人having:对查找结果进一步过滤,类似于SQL语句的where 准备工作 from sqlalchemy imp ...

  10. DJANGO MODEL FORMSETS IN DETAIL AND THEIR ADVANCED USAGE

    Similar to the regular formsets, Django also provides model formset that makes it easy to work with ...