Beispiel einer CSS3D+-Animation (vollständiger Code im Anhang)

Der Inhalt dieses Artikels handelt von CSS3D +-Animationsbeispielen (vollständiger Code im Anhang). Ich hoffe, dass er für Sie hilfreich ist.

Vorwort

Ich habe kürzlich mit der Verwendung von CSS zum Erstellen von 3D-Effekten herumgespielt und mehrere Demos geschrieben, daher werde ich sie in diesem Blog zusammenfassen. Bevor Sie diesen Blog lesen, verstehen Sie bitte zunächst die Eigenschaften von CSS 3D, wie zum Beispiel: Transformationsstil, Transformationsursprung, Transformation, Perspektive.

Schreiben Sie einen einfachen Würfel

1. Wir verwenden zunächst CSS, um einen Quader mit 6 Seiten zu implementieren Erfahrung beim Schreiben von 3D-Animationen zeigt, dass es am besten ist, ein übergeordnetes Element zum Umschließen zu haben

<p>
    </p>

        
• 1
        
• 2
        
• 3
        
• 4
        
• 5
        
• 6
    

2. Legen Sie zunächst die Breite und Höhe für .parent sowie den Betrachtungsabstand und den Basispunkt fest Position für ihn.

.parent{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
            perspective: 2000px;
            perspective-origin: -40% -80%;
            background: #000;
        }

3. Legen Sie die Attribute „Breite“, „Höhe“ und „Preserve-3D“ fest, um die 3D-Transformation des Unterelements li beizubehalten 🎜>

        ul{
            width: 50px;
            position: relative;
            margin: 100px auto;
            transform-style : preserve-3d;
        }
         li{
            width: 100px;
            height: 100px;
            background:  rgba(255, 255, 0, 0.3);
            position: absolute;
            text-align: center;           
            border: 3px solid greenyellow;
        }

Der Effekt ist wie unten gezeigt. Wie gezeigt:

4. Schreiben Sie zuerst ein Gesicht und legen Sie den Hintergrund dafür fest Hintergrund: rgba(255, 255, 0, 0.3 );

 li:nth-child(1){
            background:  rgba(255, 255, 0, 0.3);
            transform:  translateY(50px) rotateX(90deg);
        }

Der Effekt ist wie folgt:

5. Wir haben das erste Gesicht geschrieben und dann die anderen 6 Gesichter so angepasst, dass sie wie im Bild unten gezeigt werden. Die Drehrichtung wird hier nicht erklärt. Freunde, die es nicht verstehen, können andere Dokumente selbst überprüfen. Der Effekt von

        /*上面*/
         li:nth-child(1){
            transform: translateY(-50px) rotateX(90deg);
        } 
        /*下面*/
        li:nth-child(2){
        
            transform:  translateY(50px) rotateX(90deg);
        }
        /*左面*/
        li:nth-child(3){
            transform: translateX(-50px) rotateY(90deg);
        }
        /*右面*/
        li:nth-child(4){
            transform: translateX(50px) rotateY(90deg);
        }
        /*前面*/
        li:nth-child(5){
            transform: translateZ(50px);
        }
        /*后面*/
        li:nth-child(6){
            transform: translateZ(-50px);
        }

ist wie folgt:

Das Folgende sind die Effekte von zwei CSS3D+-Animationen

1. Der Code lautet wie folgt:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>书页2</title>
    <style>
        .container{
            width: 1000px;
            height: 650px;
            background: #000;
            perspective: 2000px;
            border: 1px solid transparent;
            overflow: hidden;
            margin: 0 auto;
            perspective-origin: 10% 20%;
           
        }
    
        .cube{
            width: 200px;
            height: 300px;
            transform-style: preserve-3d;
            margin:100px auto;
            
            position: relative;
            transform: rotateX(30deg);
            border-radius: 50%;
            padding: 60px;
        }
        .mian{
            width: 200px;
            height: 300px;
            background-image: url(1.jpg);
            background-position:400px 0;
            position: absolute;
           
            border: 1px solid #ccc;
            transition: 2s;
        }
        /* .mian1:hover{
            transform-origin: right;
            transform: rotateY(-60deg);
        } */
        .mian1{
            transform-origin: right;
            transform: translateX(-200px) rotateY(45deg);
            background-position: 0 0;
        }
        .mian3{
            transform-origin: left;
            transform: translateX(200px) rotateY(45deg);
            background-position: 200px 0;
        }
        .mian3:hover{
            transform: translateX(200px) rotateY(0deg);
        } 
        .mian1:hover{
            transform: translateX(-200px) rotateY(0deg);
        }
    </style>


    <p>
        </p><p>
            </p><p></p>
            <p></p>
            <p></p>
        

     2. Der Code lautet wie folgt:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>立方体</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .parent{
            width: 1000px;
            margin:  0 auto;
            height: 600px;
            background: black;
            perspective: 5000px;
            perspective-origin: -40% -120%;
            border: 1px solid #000;
        }
        ul{
            width: 100px;
            height: 300px;
            position: relative;
            margin:100px auto;
            transform-style: preserve-3d;
            animation: zuan 3s linear infinite;
            border: 1px solid greenyellow;
        }

        li{
            width: 100px;
            height: 300px;
            background:  rgba(0, 0, 0, 0.5);
            position: absolute;
            text-align: center;
            line-height: 100px;
            
            border: 3px solid greenyellow;
        }
        li:nth-child(1){
            transform: rotateY(30deg) translateZ(-200px);
      
        }
        li:nth-child(2){
            transform: rotateY(60deg) translateZ(-200px);
            background:  rgba(255, 0, 0, 0.5);
        }
        li:nth-child(3){
            transform: rotateY(90deg) translateZ(-200px);
            
        }
        li:nth-child(4){
            transform: rotateY(120deg) translateZ(-200px);
            background:  rgba(0, 0, 255, 0.5);
        }
        li:nth-child(5){
            transform: rotateY(150deg) translateZ(-200px);
            
        }
        li:nth-child(6){
            transform: rotateY(180deg) translateZ(-200px);
            background:  rgba(255, 0, 255, 0.5);
        }
        li:nth-child(7){
            transform: rotateY(210deg) translateZ(-200px);
      
        }
        li:nth-child(8){
            transform: rotateY(240deg) translateZ(-200px);
            background:  rgba(0, 255, 0, 0.5);
        }
        li:nth-child(9){
            transform: rotateY(270deg) translateZ(-200px);
      
        }
        li:nth-child(10){
            transform: rotateY(300deg) translateZ(-200px);
            background:  rgba(0, 255, 255, 0.5);
        }
        li:nth-child(11){
            transform: rotateY(330deg) translateZ(-200px);
      
        }
        li:nth-child(12){
            transform: rotateY(360deg) translateZ(-200px);
            background:  rgba(255, 255, 255, 0.5);
        }

        @keyframes zuan{
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
    
    </style>



    <p>
        </p>

                 
•             
•             
•             
•             
•             
•             
•             
•             
•             
•             
•             
•         

    

     Der Effekt ist wie folgt folgt:

Verwandte Empfehlungen:

Wie erziele ich beim Laden einer Webseite einen CSS-Stileffekt? (Mehrere Stilbeispiele)

Wie man reines CSS verwendet, um einen lächelnden und meditierenden kleinen Mönch zu implementieren

Wie man Schriftschatteneffekte mit CSS implementiert Attribute ? (Code-Demo)

Das obige ist der detaillierte Inhalt vonBeispiel einer CSS3D+-Animation (vollständiger Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!