【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解
transform字面上就是变形，改变的意思。
在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
2D Transform 方法
- translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
- rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
- scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
matrix() 和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
下面我们一个个来介绍它们：
一、移动translate
1、translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
如：translate : translate(100px,20px);
2、translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
如：transform:translateX(100px);
3、translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
如：transform:translateY(20px);
二、旋转rotate
rotate(angle) 定义 2D 旋转，在参数中规定角度。
如：transform:rotate(30deg);
三、缩放scale
注意：默认值是1，它的值放大是比1大，缩小比1小。
1、scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
如：transform:scale(2,1.5);
2、scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
如：transform:scaleX(2):
3、scaleY(n) 定义 2D 缩放转换，改变元素的高度。
如：transform:scaleY(2):
四、扭曲skew
1、skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
如：transform:skew(30deg,10deg);
2、skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
如：transform:skewX(30deg);
3、skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
如：transform:skewY(10deg);
改变元素基点transform-origin
2D 转换元素能够改变元素 x 和 y 轴。
| 值 | 描述 |
| x-axis |
定义视图被置于 X 轴的何处。可能的值：
|
| y-axis |
定义视图被置于 Y 轴的何处。可能的值：
|
3D 转换属性
| 属性 | 描述 |
| transform | 向元素应用 2D 或 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
transform-style: flat|preserve-3d; 表示所有子元素在3D空间中呈现。
如：
perspective: number|none; 设置从何处查看一个元素的角度
如：perspective: 500;
3D Transform 方法
2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外。
（下面是我之前看的一个不错的例子，借过来分享到这。）
例如，下面一个包含两个变换函数的transform的效果（gif）：
如果交换这两个变换函数的顺序，是这样的效果：
可以看到，由于坐标系会随着每一次变换发生改变，因此不同顺序的情况下，元素最终的位置也不同。
CSS3 过渡
| 属性 | 描述 |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property
transition-duration
transition-timing-function
transition-delay
如：
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.box:hover{
width:300px;
}
</style>
</head>
<body> <div class="box"></div>
</body>
</html>
效果就是这样的，它在宽度变成300px时会有一个过程，就是过渡。
今天的内容就是这些~~~
【CSS3 transform属性和过渡属性详解】的更多相关文章
- CSS3之多列布局columns详解
CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...
- 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- springboot快速入门（二）——项目属性配置（日志详解）
一.概述 application.properties就是springboot的属性配置文件 在使用spring boot过程中,可以发现项目中只需要极少的配置就能完成相应的功能,这归功于spring ...
- Java环境变量（Env）和系统属性（Property）详解
环境变量Env 使用System.getenv()获取系统的所有环境变量的Map,注意它是一个UnmodifiableCollection,是一个只读视图 环境变量并不提供set方法,即没有Syste ...
- css3动画中的steps值详解
css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,还有自定义贝塞尔曲线 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 原生JS：全局属性、全局方法详解
全局属性.全局方法 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5853342.html 首先普及几个我总结的非常实用又很基础的知识:(呵呵,仅 ...
- Python进阶之“属性（property）”详解
Python中有一个被称为属性函数(property)的小概念,它可以做一些有用的事情.在这篇文章中,我们将看到如何能做以下几点: 将类方法转换为只读属性 重新实现一个属性的setter和getter ...
随机推荐
- 【python】入门：打印字符串、简单计算
- <大话设计模式>笔记
读完了<大话设计模式>这本书,收获很多,对程序设计有了很多新的理解.将每章模式的大概要点做了些笔记以备查阅,一些设计模式书读完也对其了解得不是很透彻,需要以后在实践中来不断地加深理解吧.读 ...
- xCode8以及iOS10 的新特性
其他:ios10中 适配问题(1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8.UserN ...
- [C/C++语言标准] ISO C99/ ISO C11/ ISO C++11/ ISO C++14 Downloads
语言法典,C/C++社区人手一份,技术讨(hu)论(peng)必备 ISO IEC C99 https://files.cnblogs.com/files/racaljk/ISO_C99.pdf IS ...
- MySQL 如何存储长度较大的varchar与blob
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/96 最近,在工作中遇到了MySQL中如何存储长度较长的字段类型问 ...
- 通过 kms 激活 office 2016
1.管理员模式打开cmd,并切换到office的安装路径 注:office2016默认安装在C:\Program Files\Microsoft Office\Office16,激活其他office自 ...
- angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框
首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.eve ...
- 盗版SQL Server的性能限制
盗版SQL Server的性能限制 微软的SQL Server产品分为两种卖法1.盒装 :Server+CAL授权方式(SQL2017取消了Server+CAL授权方式,盗版序列号,一般电脑城有卖光盘 ...
- K：java中的hashCode和equals方法
hashCode和equals方法是Object类的相关方法,而所有的类都是直接或间接的继承于Object类而存在的,为此,所有的类中都存在着hashCode和equals.通过翻看Object类 ...
- 【JDK1.8】JDK1.8集合源码阅读——LinkedList
一.前言 这次我们来看一下常见的List中的第二个--LinkedList,在前面分析ArrayList的时候,我们提到,LinkedList是链表的结构,其实它跟我们在分析map的时候讲到的Link ...