过渡及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转换的主要内容,如果未能解决你的问题,请参考以下文章

CSS3动画2D3D转换

前端学习 HTML+CSS进阶

CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别

3d转换

unity3d小小白之背景音乐3d与2d的转换(非代码

将 3D 转换转换为 2D