3D空间转换

最新推荐文章于 2024-09-27 11:01:06 发布

BAO__K

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量205

点赞数

分类专栏： html css 基础文章标签： html css 3d 前端 css3

本文链接：https://blog.csdn.net/BAO__K/article/details/126043998

版权

基础同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

可以给父元素设置perspective：值；数值一般设为800-1200之间

1.位移 (translate)

语法：transform:translate3d (x,y,z)

<!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>Document</title>
    <style>
        body {
            perspective: 800px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: burlywood;
            margin: 100px auto;
            transition: all 1s;
        }
        .box:hover {
            transform: translateZ(100px);  
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

X轴向右为正，Y轴向下为正，Z轴是朝向自己的方向为正。

2.旋转（rotated）

语法：transform： rotated3d(x,y,z)

单位为deg（度数）/turn（圈）

<!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>Document</title>
    <style>

        .box1 {
            perspective: 800;
            width: 100px;
            height: 100px;
            background-color: #f0f;
            transition: all 1s;
        }

        .box1:hover {
            transform: rotateX(80deg);
        }

        .box2 {
            perspective: 800;
            width: 100px;
            height: 100px;
            background-color: #0F0;
            transition: all 1s;
        }

        .box2:hover {
            transform: rotateY(80deg);
        }

        .box3 {
            perspective: 800;
            width: 100px;
            height: 100px;
            background-color: #00f;
            transition: all 1s;
        }

        .box3:hover {
            transform: rotateZ(80deg);
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

左手👍拇指朝向是正方向，正数旋转是四指方向，负数相反。

3.缩放（scale）

语法：transform:scale3d (x,y,z)

没有单位，直接填数字，代表的是缩放几倍

<!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>Document</title>
    <style>
        body {
            perspective: 800px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: #f00;
            transition: all 1s;
        }

        .box1:hover {
            transform:scaleX(2);
        }

        .box2 {
         width: 200px;
         height: 200px;
         background-color: #00f;
         transition: all 1s;
        }

        .box2:hover {
         transform:scaleY(2);
        }

        .box3 {
         width: 200px;
         height: 200px;
         margin: 0 auto;
         background-color: #f0f;
         transition: all 1s;
        }

        .box3:hover {
         transform:scaleZ(20) rotateX(60deg);
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

Z轴的缩放需要搭配旋转才能看出来