html的过渡、平移、旋转与3d属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了html的过渡、平移、旋转与3d属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、过渡属性

过渡属性介绍：

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

注意点：

过渡效果对display:none;和display:blok;不起作用

语法：

过渡属性分写形式：

transition-property：检索或设置对象中的参与过渡的属性

transition-duration：检索或设置对象过渡的持续时间

transition-delay：检索或设置对象延迟过渡的时间

transition-timing-function：检索或设置对象中过渡的动画类型

简写：

transition:all(全部或所有)/具体属性值    运动时间s/ms   延迟时间s/ms   动画类型;

动画类型示例图:

html3d旋转,html,3d,前端,css

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            background-color: hotpink;
            /* 需要参与过渡的属性 */
            /* transition-property: width, height, background-color; */

            transition-property: all;

            /* 过渡时间 */
            transition-duration: 1s;

            /* 延迟时间 */
            transition-delay: 2s;
            /* 检索或设置对象中过渡的动画类型 */
            transition-timing-function：ease-in;
            /* 简写形式 */
            transition: all 1s 2s ease-in;
        }
        div:hover{
            width: 50px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二、2D属性

transform 该属性允许我们对元素进行旋转、缩放、移动。

位移语法:

1、translate()

将元素向指定的方向移动，类似于position中的relative。

如：transform: translate(100px, 0px);

第一个参数:水平方向

第二个参数:垂直方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 
                transform
                + 可以允许咱们对元素进行位移、旋转、缩放操作 
                + 注意点：
                  => 两个相同的transform之间会进行覆盖
                位移轴方向
                + X轴表示左右
                + Y轴表示上下
                + Z轴表示前后
            */

            /* transform: translateX(100px);
            transform: translateY(100px); */

            /* transform: translateX(100px) translateY(200px); */

            transform: translate(100px, 200px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

缩放属性语法:

2、scale()

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

如：transform: scale(0.5, 0.5);

第一个参数:水平方向

第二个参数:垂直方向

注意点:

如果取值是1, 代表不变

如果取值大于1, 代表需要放大

如果取值小于1, 代表需要缩小

如果水平和垂直缩放都一样, 那么可以简写为一个参数

transform: scale(1.5);

缩放使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 50px auto;
            /* 
                scale
                + 表示的是缩放（放大、缩小）
                + 值
                  => 如果值是1表示不进行缩放，但是不能给0
                  => 如果值是大于1的表示放大，值是小于1的表示缩小
                  => 可以写小数，小数前面的零可以省略
                  => 如果是1个值的时候表示的是一起放大或者缩小
                + X轴缩放，缩放的是宽度
                + Y轴缩放，缩放的是高度
                + Z轴缩放，缩放的是厚度（深度）
            */

            /* transform: scaleX(2) scaleY(2); */

            /* transform: scale(2, .5); */

            transform: scale(.5);

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

旋转语法：

3、rotate()

旋转rotate()通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

注意点:

1.如果需要进行多个转换, 那么用空格隔开

2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的 如：transform: rotate(45deg);

translate(100px, 0px) scale(1.5, 1.5);

rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
rotateZ() 方法，元素围绕其 Z轴以给定的度数进行旋转，默认就是Z轴旋转。

旋转和景深使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 200px;
            height: 300px;
            margin: 50px auto;
        }
        ul li{
            width: 200px;
            height: 300px;
            border: 1px solid;
            margin: 60px 0;
            list-style: none;
            /* 透视（景深）属性，指的是近大远小的效果 */
            /* perspective: 500px; */
        }
        /* 
        
            rotate
            + 表示旋转
            + deg表示度数
            + X轴旋转，表示的是上下
            + Y轴旋转，表示的是左右
            + Z轴旋转，表示的是顺时针或者逆时针

            2D空间
            + 二维空间，就是平面空间，物体是没有立体感的
            3D空间
            + 三维空间，就是立体空间

            */
        ul li img{
            width: 200px;
            height: 300px;
        }
        ul li:nth-child(1) img{
            /* 透视属性可以设置在子元素上面，但是不推荐 */
            /* transform:perspective(500px) rotateX(45deg); */
            transform:rotateX(45deg);
        }
        ul li:nth-child(2) img{
            transform: rotateY(45deg);
        }
        ul li:nth-child(3) img{
            transform: rotateZ(45deg);
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
    </ul>
</body>
</html>

变形原点：

transform-origin: top left;

控制2d效果的产生位置

变形原点使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 50px auto;
            perspective: 500px;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            /* 变形原点，默认旋转都是在元素的中心位置 */
            /* transform-origin: top left; */
            transform-origin: 50px 70px;
            transform: rotateX(0deg) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
</html>

景深属性语法:

perspective: 数值；透视属性：近大远小

注意点：一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

三、translate3d

1)什么是3d的场景呢？

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴

3d场景，在垂直于屏幕的方法，相对于2d多出个z轴

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

下图为3d场景坐标图

html3d旋转,html,3d,前端,css

2)transform-style属性

ransform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。
他主要有两个属性值：flat和preserve-3d

translate3d位移属性

3D位移

CSS3中的3D位移主要包括:

translateZ()

translate3d(值1，值2，值3)两个功能函数；

值1：代表横向坐标位移向量的长度；

值2：代表纵向坐标位移向量的长度；

值3：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

4)rotate3d旋转属性

3D旋转

CSS3中的3D旋转主要包括:

rotateX()

rotateY()

rotateZ()

rotate3d(1,1,0,4deg)四个功能函数；

4个参数，前三个，对应x,y,z 轴，是标示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。

3d旋转属性使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: 500px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            margin: 200px auto;
            /*
                值
                + 值1，表示X轴
                + 值2，表示Y轴
                + 值3，表示Z轴
                + 值4，表示度数
                + 前面三个值都是用1或者0表示，1表示沿着该轴进行旋转，0表示不旋转
            */
            transform: rotate3d(1, 1, 1, 45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5)scaleZ缩放属性:

CSS3中的3D缩放主要包括:

scaleZ()；

6)景深属性：

生活中的3d 区别于2d的地方

近大远小 景深 

程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）

perspective: 1200px;(加在父元素上)

transform:perspective(1200px) （在子元素中使用）

注意点：

a、两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间

2、如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

四、斜切

transform: skewY()文章来源地址https://www.toymoban.com/news/detail-692275.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            margin: 200px auto;
            /* transform: skewX(30deg); */
            transform: skewY(30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>