过渡及2D与3D转换

最新推荐文章于 2022-07-07 19:59:31 发布

weixin_34268579

最新推荐文章于 2022-07-07 19:59:31 发布

阅读量176

点赞数

原文链接：http://www.cnblogs.com/youwei716/p/11070773.html

版权

一.过渡

什么是过渡（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>

转载于:https://www.cnblogs.com/youwei716/p/11070773.html