suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für die Verwendung von CSS-Code zur Erzielung einer 360-Grad-Drehung eines Würfels

Beispiel für die Verwendung von CSS-Code zur Erzielung einer 360-Grad-Drehung eines Würfels

巴扎黑
巴扎黑Original
2017-05-21 10:33:112264Durchsuche

Dieser Artikel führt Sie anhand von Beispielcode in die Methode zur Verwendung von CSS ein, um den 360-Grad-Rotationseffekt eines Würfels zu erzielen. Der Effekt nach der Implementierung ist sehr cool und der implementierte Code ist sehr einfach, was für alle sehr hilfreich ist Freunde, die es brauchen, können unten vorbeischauen.

Das statische Rendering ist wie folgt:

Beispielcode:

Der Code lautet wie folgt: 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { margin: 0; padding: 0}
        ul {list-style: none;}
        ul {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            transition: all 6s;
            /*6秒时间转变*/
            transform-style: preserve-3d;
            /*放在父盒子内*/
        }
        ul li {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: #fff;
        }
        li:nth-child(1){
            transform: rotateX(0deg) translateZ(100px);
            /*translateZ是为了让立方体出现形状*/
            background-color: rgba(255, 0, 0, 0.6);
        }
        li:nth-child(2){
            transform: rotateX(-90deg) translateZ(100px);
            background-color: rgba( 0, 255,0, 0.6);
        }
        li:nth-child(3){
            transform: rotateX(-180deg) translateZ(100px);
            background-color: rgba(0,0,255,0.5);
        }
        li:nth-child(4){
            transform: rotateX(-270deg) translateZ(100px);
            background-color: rgba(50,50,25,0.5);
        }
        li:nth-child(5){
            transform: rotateY(-90deg) translateZ(100px);
            background-color: rgba(255,0,255,0.5);
        }
        li:nth-child(6){
            transform: rotateY(90deg) translateZ(100px);
            background-color: rgba(0,255,255,0.5);
        }
        ul:hover{
            transform :rotateX(360deg) rotateY(360deg);
        }
    </style>
</head>
<body>
<ul>
    <li>第1个盒子</li>
    <li>第2个盒子</li>
    <li>第3个盒子</li>
    <li>第4个盒子</li>
    <li>第5个盒子</li>
    <li>第6个盒子</li>
</ul>
</body>
</html>

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von CSS-Code zur Erzielung einer 360-Grad-Drehung eines Würfels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：7 Möglichkeiten, Container mit CSS horizontal und vertikal zu zentrierenNächster Artikel：7 Möglichkeiten, Container mit CSS horizontal und vertikal zu zentrieren

In Verbindung stehende Artikel

Mehr sehen