过渡及2D与3D转换
Posted youwei716
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了过渡及2D与3D转换相关的知识，希望对你有一定的参考价值。
一.过渡
什么是过渡（transition）？
过渡（transition）是元素从一种样式逐渐改变为另一种的效果。
1.要实现这一点，必须规定两项内容：
a.规定您希望把效果添加到哪个CSS属性上 ；
b.规定效果的时长 。
格式：transition: width/(all) 2s;(注：当只需要width时就直接写width，如果需要过渡所有元素就可以使用all)
注：如果时长未规定，则不会有过渡效果，因为默认值是 0。
2.效果开始于指定的CSS属性改变值时。CSS属性改变的典型时间是鼠标指针位于元素上时：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * margin: 0; padding: 0; .main width: 500px; height: 500px; background: black; transition: all 2s; .main:hover width: 100px; height: 100px; background:yellow; </style> </head> <body> <div class="main"></div> </body> </html>
当指针移出元素时，它会逐渐变回原来的样式 。
3. 多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
例如:transition: width 2s, height 2s, transform 2s;
过渡属性
下面的表格列出了所有的转换属性：
1.transition：简写属性，用于在一个属性中设置四个过渡属性。
2.transition-property：规定应用过渡的 CSS 属性的名称。
3.transition-duration：定义过渡效果花费的时间。默认是 0。
4.transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
设值：a.linear 以相同速度开始至结束的过渡效果
b.ease-in以慢速开始的过渡效果
c.ease慢速开始，然后变快，然后慢速结束的过渡效果
d.ease-out以慢速结束的过渡效果
e.ease-in-out以慢速开始和结束的过渡效果
5.transition-delay：规定过渡效果何时开始。默认是 0。
二.2D转换
1.通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;
.div2
transform:translate(50px,60px);
</style>
</head>
<body>
<div></div>
<div class="div2"></div>
</body>
</html>
transform: translate(50px,50px);（把元素从左侧移动 50 像素，从顶端移动 50 像素）
2.通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;
.div2
transform:rotate(30deg);
</style>
</head>
<body>
<div></div>
<div class="div2"></div>
</body>
</html>
transform: rotate(60deg);（把元素顺时针旋转 60 度。）
3.通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;
.div2
transform: scale(2,2);
</style>
</head>
<body>
<div></div>
<div class="div2"></div>
</body>
</html>
transform: scale(2,2);（把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 2 倍。）
4.通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
margin:30px;
width:200px;
height:200px;
background-color:yellow;
transition: all 3s;
border-radius: 100px 100px;
.div2
transform: skew(30deg,20deg);
</style>
</head>
<body>
<div></div>
<div class="div2"></div>
</body>
</html>
transform: skew(60deg,60deg);（围绕 X 轴把元素翻转 60 度，围绕 Y 轴翻转 60 度）
5.matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
2D Transform 方法
matrix(n,n,n,n,n,n) 定义2D转换，使用六个值的矩阵。
translate(x,y) 定义2D转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义2D转换，沿着 X 轴移动元素。
translateY(n) 定义2D转换，沿着 Y 轴移动元素。
scale(x,y) 定义2D缩放转换，改变元素的宽度和高度。
scaleX(n) 定义2D缩放转换，改变元素的宽度。
scaleY(n) 定义2D缩放转换，改变元素的高度。
rotate(angle) 定义2D旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义2D倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义2D倾斜转换，沿着 X 轴。
skewY(angle) 定义2D倾斜转换，沿着 Y 轴。
三.3D转换
2D 转换与 3D 转换之间的不同之处：2D为平面旋转；3D为空间旋转 。
转换属性
下面列出了所有的转换属性：
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
3D 转换方法
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 3D 转化。
translateX(x) 3D 转化，仅使用用于 X 轴的值。
translateY(y) 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 3D 缩放转换。
scaleX(x) 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 3D 旋转。
rotateX(angle) 沿 X 轴的 3D 旋转。
rotateY(angle) 沿 Y 轴的 3D 旋转。
rotateZ(angle) 沿 Z 轴的 3D 旋转。
perspective(n) 3D 转换元素的透视视图。 perspective（透视距离）：观察者距离Z轴原点的距离，设置该属性会制造透视效果。（perspective 属性只影响 3D 转换元素。）
rotateX()方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
.div2
transform:rotateX(150deg)
</style>
</head>
<body>
<div>第一个div</div>
<div class="div2">第二个div2</div>
</body>
</html>
rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
.div2
transform: rotateY(150deg);
</style>
</head>
<body>
<div>第一个div</div>
<div class="div2">第二个div2</div>
</body>
</html>
以上是关于过渡及2D与3D转换的主要内容，如果未能解决你的问题，请参考以下文章