3D转换(3D转换实现一个正方体)

最新推荐文章于 2023-01-01 20:23:18 发布

杏黄的三叶草

最新推荐文章于 2023-01-01 20:23:18 发布

阅读量515

点赞数

分类专栏： Web前端CSS

本文链接：https://blog.csdn.net/dwjdj/article/details/104106786

版权

Web前端CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

perspective属性

◆该属性主要用于呈现良好的3D透视效果

perspective:1000px;
总结：
1.该属性要给变形元素的父元素设置
2.该属性不是一个必须要设置的属性
3.该属性的取值不是唯一的，但是我们一般情况下将该属性的取值设置为800~1000之间

平移

transform:translateX(100px) translateY(100px) translateZ(100px);
总结：
1.如果设置的是正数，那么就沿着对应坐标轴的正方向移动，反之负方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 400px;
            background-color: blue;
            overflow: hidden;
            perspective: 900px;
        }
        .one{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 1s linear;
        }
        .box:hover .one{
            transform:  translateZ(200px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="one"></div>
</div>
</body>
</html>

旋转

在这里插入图片描述

记住变化之后，坐标轴也跟着变化了

总结：
◆通过左手法则判断元素的旋转方向
◆左手法则： 用左手握住坐标轴，大拇指指向坐标轴的方向，四个手指弯曲的方向就是旋转的方向

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 400px;
            background-color: blue;
            overflow: hidden;
            perspective: 900px;
        }
        .one{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 1s linear;
        }
        .box:hover .one{
            /*transform:  translateZ(200px);*/
            /*transform: rotateY(360deg);*/
            transform: rotateX(360deg);
        }

    </style>
</head>
<body>
<div class="box">
    <div class="one"></div>
</div>
</body>
</html>

缩放与倾斜

transform: scaleX(2) scaleY(2) ;
transform: skewX(30deg);

3D转换实现一个正方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow: hidden;
        }
        .box{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateY(45deg) rotateX(45deg);
        }
        .box>div{
            width: 400px;
            height: 400px;
            position: absolute;
        }
        .top{
            background-color: #000000;
            transform: rotateX(90deg) translateZ(200px);
        }
        .bottom{
            background-color: blue;
            transform: rotateX(-90deg) translateZ(200px);
        }
        .left{
            background-color: yellow;
            transform: rotateY(-90deg) translateZ(200px);
        }
        .right{
            background-color: red;
            transform: rotateY(90deg) translateZ(200px);
        }
        .before{
            background-color: orange;
            transform: translateZ(200px);
        }
        .after{
            background-color: #ff1ba6;
            transform: translateZ(-200px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="before"></div>
    <div class="after"></div>
</div>
</body>
</html>