空间转换，动画的说明与使用》

zimingyo

已于 2022-04-22 22:50:17 修改

阅读量338

点赞数

分类专栏：移动web 文章标签： css html5

于 2022-03-30 23:09:43 首次发布

本文链接：https://blog.csdn.net/zimingyo/article/details/123858120

版权

移动web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

空间转换
平面转换是2D，而空间转换是3D：
平面转换：分X轴，Y轴
空间转换：分X轴，Y轴，Z轴

空间位移
语法：
transform:translate3d(x,y,z)

transform:translateX(值)
transform:translateY(值)
transform:translateZ(值)

取值（正负均可）：

像素单位数值
百分比

注意：默认情况设置X，Y，Z是不会达到预期效果

perspective属性实现透视

属性（添加给父级）

perspective:值；
取值：像素单位数值，数值一般在800 - 1200（值越小，效果越明显；值越大，效果越不明显）
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离（视觉效果）

空间旋转
使用rotate实现元素空间旋转效果

语法：

transform:rotateZ(值)；相当于平面内旋转
transform:rotateX(值); 相当于平面为轴（横），由外到内
transform:rotateY(值)；相当于平面为轴（竖），由外向内

左手法则：
判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
在这里插入图片描述
拓展

rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
x,y,z取值为0 - 1之间的数字

立体呈现
结合之前的perspective透视属性，是否能呈现立体图形？
答：不能，perspective只增加近大远小，近实远虚的视觉效果

实现方法：

添加transform-style:preserve-3d;
使子元素处于真正的3d空间
默认值flat,表示子元素处于2D平面内呈现

示例
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            line-height: 200px;
            text-align: center;

             /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
            line-height: 200px;
            text-align: center;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">橙色</div>
        <div class="back">绿色</div>
    </div>
</body>
</html>

效果图
在这里插入图片描述
空间缩放
语法

transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);

动画

animation添加动画效果

过渡实现的效果：实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放，最终画面，是否暂停）

动画本质：是快速切换大量图片时在人脑中形程的具有连续性的画面

构成动画的最小单元：帧或动画帧

动画的实现步骤
1.定义动画

@keyframes 动画名称 {
from {}
to {}
}

@keyframes 动画名称 {
0% {}
10% {}
15% {}
100% {}
}
注：百分比是指动画执行时间比

2.使用动画(写在要实现动画的主体里)
animation: 动画名称 动画花费时长;

示例：
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            animation: change 1s;
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>