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,
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!
