温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

纯CSS实现3D的案例

发布时间:2020-10-22 17:06:11 来源:亿速云 阅读:138 作者:小新 栏目:web开发

这篇文章主要介绍纯CSS实现3D的案例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

一、正方体

我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面所组成,其次就需要我们依次构造。(据体构造在代码中)

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>正方体</title>
<style>
    .d3{
        height: 300px;
        width:300px;
        perspective: 800px;
        margin:140px auto;
        border:1px solid #ccc;    }
    .stage{
        height: 300px;
        width: 300px;
        transform-style: preserve-3d;
        
        position: relative;
        transform: rotateX(45deg) rotateY(45deg);
        
    }
    .role{
        height: 300px;
        width: 300px;
        position: absolute;
    }
    .stage{
        animation: dong 3s linear infinite;(这是舞台)

    }
    .stage:hover{
        animation: paused;
    }
    @keyframes dong{(这是使舞台旋转的动画)
        from{
        transform: rotateX(45deg) rotateY(45deg);            
        }
        to{
        transform: rotateX(405deg) rotateY(405deg);
        }
    }
    .di1{(正方体的前面)
        background: rgb(21, 163, 52);
        transform: translateZ(150px);(沿着z轴向前移动150px)
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di2{(正方体的后面)
        background: blue;
        transform: translateZ(-150px) rotateY(180deg);(沿着z轴向前移动150px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转)
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di3{(正方体的左面)
        background: purple;
        transform: rotateY(-90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di4{(正方体的右面)
        background: pink;
        transform: rotateY(90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di5{(正方体的上面)
        background: red;
        transform: rotateX(90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
    .di6{(正方体的下面)
        background: yellow;
        transform: rotateX(-90deg) translateZ(150px);
        font-size:100px;
        font-family:KaiTi;
        text-align: center;
        line-height: 300px;
    }
</style>
</head>
<body>
    <div>
        <div>
        (将正方体分为六个相同的面)
            <div class="role di1">前</div>
            <div class="role di2">后</div>
            <div class="role di3">左</div>
            <div class="role di4">右</div>
            <div class="role di5">上</div>
            <div class="role di6">下</div>
        </div>
    </div>
</body>
</html>

二、动态立体图片册

将图片册设计成立体3D的效果

利用旋转、移动、倾斜和3D效果让你的图册更加漂亮。
代码如下:

(将第一张定好位置后将后面的依次排列)
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事例一</title>
    <style>
        body{
            height: 100vh;
        }
        .div {
            height: 500px;
            width: 800px;
            perspective: 800px;
            margin: 50px auto;
        }

        .div1 {
            height: 500px;
            width: 800px;
            transform-style: preserve-3d;
            position: relative;
            /* transform: rotateY(-10deg); */
        }
        .div_0{
            height:400px;
            width:600px;
            position: absolute;
            margin-top:110px;
            margin-left:50px;
        }
        .div_1{
            height:400px;
            width:600px;
            background: url(../day03/timg.jpg);
            background-size: 600px 400px;
            border-radius: 20px;
            transform-origin: right bottom;
            transition: 3s;
        }

        .div_2{
            background: url(../day03/timg1.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(2deg) translateZ(-20px) translateX(20px) translateY(-20px);
        }
        .div_2:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_2:hover~.div_1{
            /* transform-origin: right bottom; */
            transform: rotateZ(2deg) translateZ(20px) translateX(20px) translateY(-20px);
            transition: 1s;
        }
        /* body:hover .div_1{
            opacity: 0;
            transition: 3s;
        } */

        .div_3{
            background: url(timg2.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(4deg)translateZ(-40px)translateX(40px)translateY(-40px);

        }
        .div_3:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_4{
            background: url(timg4.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(6deg)translateZ(-60px) translateX(60px)translateY(-60px);
            
        }
        .div_4:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_5{
            background: url(timg5.jpg);
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(8deg)translateZ(-80px) translateX(80px)translateY(-80px);
        }
        .div_5:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
        .div_6{
            background: url(timg3.jpg) no-repeat;
            border-radius: 20px;
            background-size: 600px 400px;
            transform-origin: right bottom;
            transform: rotateZ(10deg)translateZ(-100px) translateX(100px)translateY(-100px);
        }
        .div_6:hover{
            transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);
            transition: 1s;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <div class=" div_0 div_1"></div>
            <div class=" div_0 div_2"></div>
            <div class=" div_0 div_3"></div>
            <div class=" div_0 div_4"></div>
            <div class=" div_0 div_5"></div>
            <div class=" div_0 div_6"></div>
        </div>
    </div>
</body>

</html>

三、平面的星空

代码如下:
(由于没有用js所以只有平面的效果了
你掌握好旋转的中心点就很容易了)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>太阳系</title>
<style>
    body {
        background: url(timg01.jpg) no-repeat;
        background-size: 100%;
    }

    .box1 {
        height: 600px;
        width: 600px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
    }

    .box1_0 {
        height: 100px;
        width: 100px;
        margin: 0 auto;
        border: 1px solid white;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 59px);
        left: 322px;
        transform-origin: 345.5px;
        animation: dong2 5s linear infinite 4s;
    }

    @keyframes dong2 {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box1_2 {
        height: 13px;
        width: 13px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: white;
        position: absolute;
        top: calc(50% - 7.5px);
        left: 96px;
        transform-origin: -45px;
        animation: dong3 5.5s linear infinite ;
        /* animation-iteration-count: 200; */
    }

    @keyframes dong3 {
        from {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box1_1 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: rgb(7, 100, 223);
        position: absolute;
        top: 45px;
        left: calc(50% - 16.5px);
    }

    .box2 {
        height: 400px;
        width: 400px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 200px);
        left: calc(50% - 200px);
    }

    .box2_1 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        /* border: 1px solid #ccc; */
        border-radius: 50%;
        background: rgb(198, 208, 221);
        position: absolute;
        top: calc(50% - 7.5px);
        left: 43px;
        transform-origin: 157.5px;
        animation: dong1 5s linear infinite .5s;

    }

    @keyframes dong1 {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box2_2 {
        height: 15px;
        width: 15px;
        margin: 0 auto;
        border-radius: 50%;
        background: #644e11;
        position: absolute;
        top: calc(50% - 7.5px);
        left: -7px;
        transform-origin: 207.5px;
        animation: dong 5s linear infinite;
    }

    @keyframes dong {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .box3 {
        height: 300px;
        width: 300px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 150px);
        left: calc(50% - 150px);
    }

    .box4 {
        height: 30px;
        width: 30px;
        margin: 0 auto;
        border-radius: 50%;
        background: orange;
        position: absolute;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
    }
    .boxli{
        height: 900px;
        width: 900px;
        margin: 0 auto;
        border: 1px solid #ccc;
        border-radius: 50%;
       position: absolute;
       top:-120px;
       left:calc(50% - 450px);
        
    }
    .boxli_1{
        height: 15px;
        width: 15px;
        margin: 0 auto;
        border-radius: 50%;
        background: rgb(116, 100, 56);
        position: absolute;
        top:500px;
       left:-6px;
       transform-origin: 455.5px -38px;
        animation: dongli 5s linear infinite;
    }
    @keyframes dongli {
        from {
            transform: rotate(0)
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
</head>
<body>
    <div class="box1">
        <div class="box1_0">
            <div class="box1_2"></div>
            <div class="box1_1"></div>
        </div>
        <div class="box2">
            <div class="box2_1"></div>
            <div class="box2_2"></div>
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
    </div>
    <div class="boxli">
        <div class="boxli_1"></div>
</div>
</body>
</html>

以上是纯CSS实现3D的案例的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI