Heim > Artikel > Web-Frontend > HTML5 CSS3: 3D-Karusselleffektalbum

HTML5 CSS3: 3D-Karusselleffektalbum

黄舟Original: 2017-02-21 13:49:232963Durchsuche

Der Zweck dieses Blogs besteht darin, dass es einen wichtigeren Wissenspunkt zum CSS-3D-Effekt gibt, der im attraktiven Beispiel von CSS3 im vorherigen HTML5-CSS3-Thema zum Erstellen des 3D-Flip-Effekts von Baidu Tieba nicht erwähnt wurde, nämlich die Perspektive und tranlateY

Rendering: Hehe, ich habe ein paar Fotos von meinem College-Abschluss in ein Karussell verwandelt, bei dem ich mich um mein Hauptfach Geisteswissenschaften drehte, nicht zu vergessen die fürsorgliche Anmut meiner Alma Mater~

HTML5 CSS3: 3D-Karusselleffektalbum

1. Perspektive

Das Perspektive-Attribut enthält zwei Attribute: keines und den Längenwert mit Einheit.

Der Standardwert des Perspektive-Attributs ist „None“, was bedeutet, dass das 3D-Objekt aus unendlich vielen Winkeln betrachtet wird, aber flach aussieht. Ein anderer Wert, d82af2074b26fcfe177e947839b5d381, akzeptiert einen Wert mit Längeneinheiten größer als 0. Und seine Einheit kann kein Prozentwert sein. Je größer der Wert für f64b6a55ab9e6ef9d223847f6e594c7e, desto weiter erscheint der Winkel, wodurch eine eher geringe Intensität und eine sehr geringe Änderung im 3D-Raum entsteht. Umgekehrt gilt: Je kleiner dieser Wert, desto näher erscheint der Winkel, wodurch ein starker Winkel und eine große 3D-Variation entstehen. Vereinfacht ausgedrückt: Wenn die Perspektive die Länge bestimmt, gilt: Je kleiner sie ist, desto deutlicher ist der 3D-Effekt und desto näher sind Ihre Augen am 3D-Objekt und umgekehrt.

2. transform: translatorZ(length)

Unter der Annahme, dass 300px eingestellt ist, ist die Größe des Subs umso kleiner, je kleiner der Wert von TranslateZ eingestellt ist -element wird sein. Wenn der Wert nahe bei 300 Pixel liegt, scheint es, dass sich das Element vor Ihnen befindet. Wenn es 300 Pixel überschreitet, erreicht es den hinteren Bereich Ihres Sichtfelds und das Element ist unsichtbar.

Der Kern des obigen Beispiels:

Zuerst werden alle Bildcontainer absolut positioniert, überlagert und dann rotationY auf 40*i gesetzt. i bzw. = 0, 1, 2...9; alle Bilder werden sich in einer blumenähnlichen Form überschneiden

2 Setzen Sie dann translatorZ für den Container jedes Bildes, und alle Bilder werden nach außen verschoben Erweitern Sie es zu einem großen Kreis, was im Bild oben der Fall ist.

html:

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8"/>  
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>  
    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>  
  
    <script type="text/javascript">  
        // alert( 64 / Math.tan(20 / 180 * Math.PI));  
        var transform = function (element, value, key)  
        {  
            key = key || "Transform";  
            ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)  
            {  
                element.style[prefix + key] = value;  
            });  
  
            return element;  
        }  
  
  
        $(function ()  
        {  
            var deg = -40 , i = 1;  
            $("#container").click(function ()  
            {  
                transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")  
            });  
        });  
  
    </script>  
  
     
  
</head>  
<body>  
<p id="stage">  
    <ul id="container">  
        <li>  
            <img src="img/1.jpg"/>  
            <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img src="img/2.jpg"/> <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img src="img/3.jpg"/> <span>Keep on going never give up.</span>  
        </li>  
        <li>  
            <img src="img/4.jpg"/> <span>Whatever is worth doing is worth doing well.</span>  
        </li>  
        <li>  
            <img src="img/5.jpg"/> <span>Believe in yourself.</span>  
        </li>  
        <li>  
            <img src="img/6.jpg"/> <span>Action speak louder than words.</span>  
        </li>  
        <li>  
            <img src="img/7.jpg"/> <span>Never put off what you can do today until tomorrow.</span>  
        </li>  
        <li>  
            <img src="img/8.jpg"/> <span>Jack of all trades and master of none.</span>  
        </li>  
        <li>  
            <img src="img/9.jpg"/> <span>Judge not from appearances.</span>  
        </li>  
    </ul>  
</p>  
</body>  
</html>

CSS:

li  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    position: absolute;  
    bottom: 0;  
}  
  
li img  
{  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    vertical-align: middle;  
}  
  
li span  
{  
    display: block;  
    width: 128px;  
    text-align: center;  
    color: #333;  
    font-size: 8px;  
}  
  
#stage  
{  
  
    width: 900px;  
    min-height: 100px;  
    margin-left: auto;  
    margin-right: auto;  
    padding: 100px 50px;  
    -webkit-perspective: 1200px;  
    position: relative;  
}  
  
#container  
{  
    background: url("img/xawl.jpg") no-repeat 0 0;  
    margin-top: 200px;  
    width: 128px;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);  
    height: 100px;  
    margin-left: -64px;  
    -webkit-transition: -webkit-transform 1s;  
    transition: transform 1s;  
    -webkit-transform-style: preserve-3d;  
    position: absolute;  
    left: 50%;  
}  
  
li:nth-child(0)  
{  
    -webkit-transform: rotateY(0deg) translateZ(300px);  
}  
  
li:nth-child(1)  
{  
    -webkit-transform: rotateY(40deg) translateZ(300px);  
}  
  
li:nth-child(2)  
{  
    -webkit-transform: rotateY(80deg) translateZ(300px);  
}  
  
li:nth-child(3)  
{  
    -webkit-transform: rotateY(120deg) translateZ(300px);  
}  
  
li:nth-child(4)  
{  
    -webkit-transform: rotateY(160deg) translateZ(300px);  
}  
  
li:nth-child(5)  
{  
    -webkit-transform: rotateY(200deg) translateZ(300px);  
}  
  
li:nth-child(6)  
{  
    -webkit-transform: rotateY(240deg) translateZ(300px);  
}  
  
li:nth-child(7)  
{  
    -webkit-transform: rotateY(280deg) translateZ(300px);  
}  
  
li:nth-child(8)  
{  
    -webkit-transform: rotateY(320deg) translateZ(300px);  
}  
  
li:nth-child(9)  
{  
    -webkit-transform: rotateY(360deg) translateZ(300px);  
}

p#stage wird als Bühne verwendet, die Perspektive wird festgelegt, rotationY bzw. translatorZ für jedes li; dann setzen wir p#container -webkit-transform-style: preserve-3d;transform-style: flat | Der flache Wert ist der Standardwert, was bedeutet, dass alle untergeordneten Elemente auf einer 2D-Ebene gerendert werden. Preserve-3d bedeutet, dass alle untergeordneten Elemente im 3D-Raum gerendert werden. Wenn der Wert „transform-style“ für ein Element auf „preserve-3d“ festgelegt ist, bedeutet dies, dass die Reduzierungsoperation nicht ausgeführt wird und alle seine untergeordneten Elemente sich im 3D-Raum befinden. Unter normalen Umständen wird dieses Attribut für das Ausführungselement von 3D-Animationseffekten verwendet, das heißt, es dient zum Anwenden von 3D-Animationseffekten, daher sollten sich alle untergeordneten Elemente im 3D-Raum befinden.

Eines ist zu beachten: In diesem Beispiel ist der eigentliche Animationseffekt auf einen Mausklick zurückzuführen, p#Container ändert sich auf ungeeignete Weise, alle Bildelemente befinden sich in p#container und wurden als Karusselleffekt angezeigt , was Sie jetzt tun müssen, ist, den Trojaner zu drehen, sodass Sie jedes Mal nur den Winkel von „rotateY 40“ von p#container ändern müssen.

Das Obige ist der Inhalt von HTML5 CSS3: 3D-Karusselleffektalbum. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

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：HTML5-Methode zum Implementieren des Breakpoint-Fortsetzens des Hochladens von DateienNächster Artikel：HTML5-Methode zum Implementieren des Breakpoint-Fortsetzens des Hochladens von Dateien

In Verbindung stehende Artikel

Mehr sehen