Beispiel-Tutorial eines CSS3-Karussells-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Beispiel-Tutorial eines CSS3-Karussells

零下一度

Jul 16, 2017 pm 04:27 PM

csscss3

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, , 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 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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" >  
            <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <span>Do one thing at a time, and do well..</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <span>Keep on going never give up.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <span>Whatever is worth doing is worth doing well.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <span>Believe in yourself.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <span>Action speak louder than words.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/7.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <span>Never put off what you can do today until tomorrow.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/8.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <span>Jack of all trades and master of none.</span>  
        </li>  
        <li>  
            <img  src="/static/imghwm/default1.png"  data-src="img/9.jpg"  class="lazy"  / alt="Beispiel-Tutorial eines CSS3-Karussells" > <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!

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

Verwandter Artikel

Wohin sollte 'Podcast' -Link abonnieren?Apr 16, 2025 pm 12:04 PM

Für eine Weile war iTunes der große Hund im Podcasting. Wenn Sie also "Abonnieren Sie Podcast" verlinkt haben, um zu mögen:

Browser -MotorvielfaltApr 16, 2025 pm 12:02 PM

Wir haben die Oper verloren, als sie 2013 Chrome gingen. Gleiches Geschäft mit Edge, als es Anfang dieses Jahres auch Chrome ging. Mike Taylor nannte diese Veränderungen a "abnehmend

UX -Überlegungen zur WebfreigabeApr 16, 2025 am 11:59 AM

Von trashigen Clickbait -Websites bis hin zu den meisten August der Veröffentlichungen sind die Teilen von Schaltflächen seit langem im gesamten Web allgegenwärtig. Und doch ist es wohl diese diese

Wöchentliche Plattformnachrichten: Apple bereitet Webkomponenten, progressives HTML-Rendering, selbsthosting kritische Ressourcen bereitApr 16, 2025 am 11:55 AM

In der Roundup der Woche geht Apple in Webkomponenten, wie Instagram Insta-Loading-Skripte und einige Lebensmittel für das Denken für selbsthosting kritische Ressourcen sind.

Git pathspecs und wie man sie benutztApr 16, 2025 am 11:53 AM

Als ich die Dokumentation von Git -Befehlen durchschaut hatte, bemerkte ich, dass viele von ihnen eine Option hatten. Ich dachte anfangs, dass dies nur ein war

Ein Farbwähler für ProduktbilderApr 16, 2025 am 11:49 AM

Klingt ein bisschen wie ein schweres Problem. Ist es nicht? Wir haben oft keine Produktaufnahmen in Tausenden von Farben, sodass wir das mit dem mit umdrehen können. Wir auch nicht

Ein dunkler Modus wechselt mit React und ThemeProviderApr 16, 2025 am 11:46 AM

Ich mag es, wenn Websites eine dunkle Modusoption haben. Der dunkle Modus erleichtert mir das Lesen von Webseiten und hilft meinen Augen, sich entspannter zu fühlen. Viele Websites, einschließlich

Einige praktisch mit dem HTML-DialogelementApr 16, 2025 am 11:33 AM

Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und

See all articles