Code CSS pur pour réaliser la 3D (cube, album photo dynamique en trois dimensions, ciel étoilé plat)-tutoriel CSS-php.cn

Ce dont parle cet article, c'est le code pour réaliser de la 3D en utilisant du CSS pur (cube, album photo dynamique en trois dimensions, ciel étoilé plat). Les amis dans le besoin peuvent y jeter un œil.

1. Cube

Je pense que le cube peut être considéré comme la base des images 3D. Tout d'abord, le cube est composé de six faces identiques, et deuxièmement, nous devons les construire. en séquence. (La structure du volume est dans le code)

Le code est le suivant :

<!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>

Copier après la connexion

2. Album photo dynamique en trois dimensions

Concevez l'image album dans un effet 3D tridimensionnel

Utilisez la rotation, le mouvement, l'inclinaison et les effets 3D pour rendre votre album plus beau.
Le code est le suivant :

（将第一张定好位置后将后面的依次排列）
<!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>

Copier après la connexion

3. Ciel étoilé plat

Le code est le suivant :
(Comme aucun js n'est utilisé, il n'y a qu'un appartement
Vous maîtrisez la rotation. Le point central est très simple)

<!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>

Copier après la connexion

Recommandations associées :

Comment obtenir un effet de retournement d'image de carte en CSS ? (Exemple d'effets spéciaux)

Exemple d'animation css3D+ (avec code complet)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!