Heim > Artikel > Web-Frontend > CSS3-Karussell

CSS3-Karussell

php中世界最好的语言Original: 2018-03-21 16:50:012337Durchsuche

Dieses Mal bringe ich Ihnen das CSS3-Karussell. Was sind die Vorsichtsmaßnahmen für die Implementierung des CSS3-Karussells?

1. Perspektive

Das Perspektive-Attribut umfasst 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, , akzeptiert einen Wert mit Längeneinheiten größer als 0. Und seine Einheit kann kein Prozentwert sein. Je größer der Wert ist, desto weiter wird der Winkel angezeigt, 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 Teil Ihres Sichtfelds und das Element ist unsichtbar.

Der Kern des obigen Beispiels:

1. Zuerst haben alle Bildcontainer position:absolute, überlagern sie und setzen dann rotationY auf 40*i bzw. i=0. 1, 2 ...9; Alle Bilder überschneiden sich in einer blumenähnlichen Form

2 Dann legen Sie translatorZ für den Container jedes Bildes fest, und alle Bilder werden aus dem entsprechenden Winkel nach außen verschoben und in eine erweitert großer Kreis, das ist der Effekt des obigen Bildes.

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 als Bühne, legen Sie die Perspektive fest, legen Sie rotationY und translatorZ für jedes Li fest, dann werden wir es tun p#container ist auf -webkit-transform-style: Preserve-3d;

transform-style: flat | preserve-3d

eingestellt, wobei der flache Wert der Standardwert ist, der angibt, dass alle untergeordneten Elemente auf a gerendert werden 2D-Ebene. „preserve-3d“ bedeutet, dass alle untergeordneten Elemente im 3D-Raum gerendert werden. Wenn der Transformationsstilwert eines Elements 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Unpopuläre CSS-Eigenschaften, die Sie nicht kennen

Wie kann die absolute Positionierung von CSS kompatibel sein? mit allen Auflösungen?

CSS3-Attribute Übergang, Animation, Transformation

Das obige ist der detaillierte Inhalt vonCSS3-Karussell. 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：So verwenden Sie das Border-Attribut von CSS3Nächster Artikel：So verwenden Sie das Border-Attribut von CSS3

In Verbindung stehende Artikel

Mehr sehen