css3 3D转换

LiNO3

已于 2022-02-08 12:20:32 修改

阅读量539

点赞数

分类专栏：笔记文章标签： css3 3d 前端

于 2022-02-07 17:12:09 首次发布

本文链接：https://blog.csdn.net/qq_60471941/article/details/122795621

版权

笔记专栏收录该内容

54 篇文章 2 订阅

订阅专栏

3D转换

透视perspective

3D移动translate3d（x，y，z）

3D旋转 rotate3d

3D呈现 transfrom-style

透视perspective

让网页中产生3D效果，就需要添加透视，让2D平面产生近大远小的效果。

透视也被称为视距：人的眼睛到屏幕的距离；

距离视距点越近的物体，成像就越大，相应的，距离视距点越远的物体，成像就越小。

透视的单位是像素。

透视要写在被观察元素的父盒子上。

物体的z轴是物体距离屏幕的距离，z轴为正值时物体从屏幕里跑出来，反之就进去。

而当物体从屏幕里跑出，靠近视距点时就里视距点近，变大。反之远离时就变小；

3D移动translate3d（x，y，z）

与2d的相比新增加了一个z轴。

物体的z轴是物体距离屏幕的距离，z轴为正值时物体从屏幕里跑出来，反之就进去。

也可以和x，y一样就写一个，translateZ（**px）；

单位为px；

当简写成translate3d（x，y，z）时不能省略xyz，如果没有就写0；

3D旋转 rotate3d

3D选择可以让元素在三维平面沿着x轴，y轴，z轴或者自定义轴进行旋转。

语法：

transform：rotateX（**deg）：沿着x轴方向旋转
transform：rotateY（**deg）：沿着y轴方向旋转
transform：rotateZ（**deg）：沿着z轴方向旋转
transform：rotate3d（x，y，z，**deg）：沿着自定义x，y，z的矢量合矢量方向旋转

旋转的正方向为左手法则：

大拇指指向旋转轴方向，四指方向为旋转的正方向。

例

正方向x轴45度

正方向y轴45度

正方向z轴45度

transform: rotate3d(1, 1, 1, 45deg);

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。
transfrom-style：flat；子元素不开启3D立体空间
·transfrom-style：preserve-3d；子元素开启3D立体空间
transfrom-style写在父级盒子，影响的是子盒子。

使用前：

使用后：

翻转案例

<!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>
        body {
            perspective: 400px;
        }
        
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 200px auto;
            transition: all 2s;
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(180deg);
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            line-height: 300px;
            text-align: center;
            color: #fff;
            font-size: 30px
        }
        
        .front {
            background-color: red;
            z-index: 1;
        }
        
        .back {
            background-color: royalblue;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">lino3</div>
        <div class="back">dengni</div>
    </div>
</body>

</html>

3D导航案例

<!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>
        body {
            perspective: 350px;
        }
        
        ul li {
            float: left;
            list-style: none;
            margin: 0 5px;
        }
        
        .box {
            position: relative;
            width: 300px;
            height: 100px;
            margin: 200px auto;
            transition: all 2s;
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
        
        .front,
        .back {
            position: absolute;
            width: 100%;
            height: 100%;
            line-height: 100px;
            text-align: center;
            color: #fff;
            font-size: 30px
        }
        
        .front {
            background-color: red;
            top: 0;
            left: 0;
            z-index: 1;
            transform: translateZ(50px);
        }
        
        .back {
            top: 50px;
            left: 0;
            background-color: rgb(112, 120, 143);
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">lino3</div>
                <div class="back">dengni</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">lino3</div>
                <div class="back">dengni</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">lino3</div>
                <div class="back">dengni</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">lino3</div>
                <div class="back">dengni</div>
            </div>
        </li>
    </ul>

</body>

</html>

效果：

旋转木马案例

<!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>
        body {
            perspective: 800px;
        }
        
        @keyframes zhuan {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(3600deg);
            }
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 200px auto;
            background: url(dog.jpg) no-repeat;
            transform-style: preserve-3d;
            animation: zhuan 20s linear infinite;
        }
        
        section:hover {
            animation-play-state: paused;
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(dog.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: translateZ(300px);
        }
        
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            transform: rotateY(-120deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            transform: rotateY(-60deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

LiNO3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 3D转换

3D转换透视perspective让网页中产生3D效果，就需要添加透视，让2D平面产生近大远小的效果。透视也被称为视距：人的眼睛到屏幕的距离；距离视距点越近的物体，成像就越大，相应的，距离视距点越远的物体，成像就越小。透视的单位是像素。透视要写在被观察元素的父盒子上。物体的z轴是物体距离屏幕的距离，z轴为正值时物体从屏幕里跑出来，反之就进去。而当物体从屏幕里跑出，靠近视距点时就里视距点近，变大。反之远离时就变小；3D移动translate3d（x，y，z）与2
复制链接

扫一扫