CSS-Zeichnungs-Fantasieeffekt: Erzielen eines 3D-Rotationswürfeleffekts-CSS-Tutorial-php.cn

CSS-Zeichnungs-Fantasieeffekt: Erzielen eines 3D-Rotationswürfeleffekts

王林

Freigeben： 2023-10-19 08:55:01

Original

773 Leute haben es durchsucht

CSS-Zeichnungs-Fantasieeffekt: Erzielen eines 3D-Rotationswürfeleffekts

Fantasy-Effekte mit CSS zeichnen: 3D-Rotationswürfeleffekt erzielen

In der Webentwicklung müssen wir häufig CSS verwenden, um verschiedene fantastische Effekte zu erzielen, und einer der beliebtesten Effekte ist der 3D-Rotationswürfeleffekt. Wir können diesen Effekt leicht durch die 3D-Transformationseigenschaft von CSS erreichen. Im Folgenden werde ich detailliert vorstellen, wie CSS zum Implementieren eines rotierenden 3D-Würfels verwendet wird, und spezifische Codebeispiele bereitstellen.

Zunächst benötigen wir eine HTML-Struktur zum Hosten unseres Cubes. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D旋转立方体</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            perspective: 1000px;
            perspective-origin: 50% 50%;
            margin: 0 auto;
        }
        .cube-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
        }
        .face {
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        .front {
            transform: translateZ(100px);
        }
        .back {
            transform: rotateY(180deg) translateZ(100px);
        }
        .left {
            transform: rotateY(-90deg) translateZ(100px);
        }
        .right {
            transform: rotateY(90deg) translateZ(100px);
        }
        .top {
            transform: rotateX(90deg) translateZ(100px);
        }
        .bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cube-wrapper">
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="face top"></div>
            <div class="face bottom"></div>
        </div>
    </div>
</body>
</html>

Nach dem Login kopieren

Im obigen Code verwenden wir die Eigenschaft transform von CSS, um die Drehung und Positionsanpassung des Würfels zu realisieren. Zuerst erstellen wir einen externen Container (.container) und legen die Eigenschaft „Perspektive“ (Perspektive) und den Ursprung der Perspektive (Perspektive-Origin) fest. Attribute, diese beiden Attribute werden verwendet, um den 3D-Effekt des Würfels zu steuern. Dann haben wir innerhalb des Containers einen Cube-Wrapper (.cube-wrapper) erstellt und das Attribut transform-style: Preserve-3d; festgelegt, das zum Erstellen eines verwendet wird neuer 3D-Rendering-Kontext, sodass interne Elemente einer 3D-Transformation unterzogen werden können. Als nächstes haben wir 6 Gesichter erstellt (.face) und verschiedene transform-Attribute verwendet, um deren Position und Rotationswinkel zu bestimmen. transform属性来实现立方体的旋转和位置调整。首先，我们创建了一个外部的容器(.container)，并设置了透视(perspective)属性，以及透视原点(perspective-origin)属性，这两个属性是用来控制立方体的3D效果的。然后，在容器内部，我们创建了一个立方体包裹层(.cube-wrapper)，并设置了transform-style: preserve-3d;属性，这个属性用来创建一个新的3D渲染上下文，使得内部的元素能够进行3D变换。接下来，我们创建了6个面(.face)，并分别使用不同的transform属性来确定它们的位置和旋转角度。

最后，我们添加了一个@keyframes

Schließlich haben wir eine @keyframes-Animation hinzugefügt, um den Drehwinkel des Würfels kontinuierlich zu ändern, sodass er sich weiter drehen kann.

Durch die Analyse des obigen Codes können wir erkennen, dass es nicht schwierig ist, einen rotierenden 3D-Würfeleffekt zu erzielen. Es sind lediglich einige grundlegende CSS-Eigenschaften und einige einfache Animationseffekte erforderlich.

Natürlich ist dies nur ein einfaches Beispiel, Sie können je nach Bedarf komplexere Anpassungen und Erweiterungen vornehmen. Sie können beispielsweise jeder Seite ein anderes Hintergrundbild hinzufügen, Verlaufsfarben verwenden, um einen dreidimensionalen Effekt zu erzeugen, Text oder Symbole hinzufügen und vieles mehr. Solange Sie Ihrer Fantasie freien Lauf lassen, kann dieser rotierende 3D-Würfeleffekt noch atemberaubender werden.

Zusammenfassend lässt sich sagen, dass wir durch die Verwendung der 3D-Transformationseigenschaft von CSS problemlos einen 3D-Rotationswürfeleffekt erzielen können. Das Obige ist ein einfaches Implementierungsbeispiel. Ich hoffe, es kann Ihnen einige Ideen und Inspirationen liefern, um fantastische Effekte in der Webentwicklung zu erzielen. Lassen Sie Ihrer Kreativität freien Lauf und kreieren Sie atemberaubende Effekte! 🎜

Das obige ist der detaillierte Inhalt vonCSS-Zeichnungs-Fantasieeffekt: Erzielen eines 3D-Rotationswürfeleffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!