Heim > Artikel > Web-Frontend > Beispiel-Tutorial eines CSS3-Karussells
Beispiel-Tutorial eines CSS3-Karussells
- 零下一度Original
- 2017-07-16 16:27:282414Durchsuche
Dieser Artikel stellt hauptsächlich das CSS3-Karussell vor. Der Herausgeber findet es ziemlich gut. Ich werde es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen.
1 Perspektive
Das Attribut „Perspektive“ enthält zwei Attribute: „Keine“ 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 f64b6a55ab9e6ef9d223847f6e594c7e 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 Bereich 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 jeweils auf 40*i, i=0, 1, 2 ...9; Alle Bilder überschneiden sich in einer blumenähnlichen Form
2. Setzen Sie dann translatorZ für den Container jedes Bildes, und alle Bilder werden aus dem entsprechenden Winkel nach außen verschoben und in a 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#Bühne als Bühne, Perspektive festlegen, jedes Li einzeln Setzen Sie „rotateY“ und „translateZ“; dann werden wir p#container set -webkit-transform-style: Preserve-3d;
transform-style: flat | preserve-3d
wobei der flache Wert der Standardwert ist und alle angibt Untergeordnete Elemente werden auf einer 2D-Ebene gerendert. „preserve-3d“ bedeutet, dass alle untergeordneten Elemente im 3D-Raum gerendert werden. Wenn der transform-style-Wert für ein Element auf „preserve-3d“ gesetzt 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 „rotateY 40“ von p#container ändern müssen.
Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial eines CSS3-Karussells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!