Baidu Tiebas 3D-Karten-Flop-Effekt-CSS-Tutorial-php.cn

Dieses Mal werde ich Ihnen den 3D-Kartenumdrehungseffekt von Baidu Tieba vorstellen. Was sind die Vorsichtsmaßnahmen, um den 3D-Kartenumdrehungseffekt von Baidu Tieba zu erzielen? .

Heute zeige ich Ihnen einen von CSS3 erstellten Flip-Effekt. Wenn Sie die Maus über ein Element bewegen, können Sie spüren, dass Sie die Informationen hinter dem Element sehen können. Wenn Sie Lianliankan machen, Pokerspiele, die Ihr Gedächtnis testen, oder sogar ein paar Wörter an Ihre Freundin schreiben, können Sie es versuchen, nachdem Sie sie in das Fotoalbum aufgenommen haben, das anhand dieses Beispiels erstellt wurde, ha~

Rendering:

Einige neue CSS3-Attribute, die im Beispiel verwendet werden:

a, -webkit -perspective : 800px;

perspective (Perspektive, Betrachtungswinkel): Eigenschaft definiert den Abstand des 3D-Elements von der Ansicht in Pixel. Mit dieser Eigenschaft können Sie die Ansicht des 3D-Elements ändern. Bestimmt, ob es sich bei dem, was Sie sehen, um eine 2D-Transformation oder eine 3D-Transformation handelt.

b, -webkit-transform-style: Preserve-3d;

Das Attribut „transform-style“ gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden. Die Standardeinstellung ist flach, wir verwenden den 3D-Effekt und wählen dann 3D aus.

c, -webkit-backface-visibility: versteckt; Ob das ausgewählte Element angezeigt werden soll, nachdem es nach hinten gedreht wurde.

d, -webkit-transform: rotateY(0); Das Element dreht sich um die Y-Achse.

Die oben genannten Attribute vermitteln Ihnen zunächst ein Wahrnehmungsverständnis. Nachdem Sie die Beispiele gelesen haben, können Sie diese Attribute dann sorgfältig ausprobieren, oder Baidu oder Google.

Beispiel:

Html:

<body>    
<p id="content">  
    <ul>  
        <li>  
            <a href="#" target="_blank">  
                <p><img alt="" src="images/1.jpg"/></p>  
                <p>  
                    <h3>漩涡鸣人</h3>  
  
                    <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>  
                </p>  
            </a>  
        </li>  
        <li>  
            <a href="#" target="_blank">  
                <p>  
                    <img alt="" src="images/2.jpg"/>  
                </p>  
                <p>  
                    <h3>日向雏田</h3>  
  
                    <p>  
                        日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。</p>  
                </p>  
            </a>  
        </li>  
        <li>  
            <a href="#" target="_blank">  
                <p><img alt="" src="images/3.jpg"/></p>  
                <p>  
                    <h3>蒙奇·D·路飞</h3>  
  
                    <p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长，梦想是找到传说中的宝藏 —— ONE PIECE，成为海贼王。</p>  
                </p>  
            </a>  
        </li>  
        <li>  
            <a href="#" target="_blank">  
                <p>  
                    <img alt="" src="images/4.jpg"/>  
                </p>  
                <p>  
                    <h3>盒子先生</h3>  
  
                    <p>  
                        Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。</p>  
                </p>  
            </a>  
        </li>  
    </ul>  
</p>  
  
  
</body>

Nach dem Login kopieren

Es ist ganz einfach:

ul ist eine Reihe von Bildern, und jedes Li hat ein ( Weil wir Ich hoffe, dass durch Klicken auf das Bild gesprungen werden kann).

CSS:

<link href="css/reset.css" rel="stylesheet" type="text/css">  
  
   <style type="text/css">  
  
       body  
       {  
           font-size: 14px;  
           font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;  
           background: #111;  
       }  
  
       #content ul  
       {  
           width: 960px;  
           margin: 150px auto;  
           padding: 60px 0;  
       }  
  
       #content ul li  
       {  
           margin-right: 20px;  
           width: 225px;  
           height: 180px;  
           float: left;  
       }  
  
       #content ul li:last-child  
       {  
           margin-right: 0;  
       }  
  
       #content ul li a  
       {  
           position: relative;  
           display: block;  
           width: 100%;  
           height: 100%;  
           /*舞台（动画元素的父容器）perspective*/  
           -webkit-perspective: 800px;  
           -moz-perspective: 800px;  
  
       }  
  
       #content ul li a > p  
       {  
           position: absolute;  
           left: 0;  
           height: 0;  
           width: 100%;  
           height: 100%;  
           color: #fff;  
           /*动画元素transform-style*/  
           -webkit-transform-style: preserve-3d;  
           -webkit-transition: .8s ease-in-out ;  
           /*动画元素背后设置为hidden*/  
           -webkit-backface-visibility: hidden;  
       }  
  
       #content ul li a p:first-child  
       {  
           /* 
           绕y轴旋转 
           */  
           -webkit-transform: rotateY(0);  
           z-index: 2;  
       }  
  
       #content ul li a p:last-child  
       {  
           background: url("images/bg.jpg") no-repeat 0 0;  
           -webkit-transform: rotateY(180deg);  
           z-index: 1;  
       }  
  
       #content ul li a:hover p:first-child  
       {  
           -webkit-transform: rotateY(-180deg);  
       }  
  
       #content ul li a:hover p:last-child  
       {  
           -webkit-transform: rotateY(0);  
       }  
  
       #content ul li a p h3  
       {  
           margin: 0 auto 15px;  
           padding: 15px 0;  
           width: 200px;  
           height: 16px;  
           line-height: 16px;  
           font-size: 14px;  
           text-align: center;  
           border-bottom: 1px #fff dashed;  
       }  
  
       #content ul li a p p  
       {  
           padding: 0 10px;  
           font-size: 12px;  
           text-indent: 2em;  
           line-height: 18px;  
       }  
  
  
   </style>

Nach dem Login kopieren

Okay, im obigen CSS finden Sie die zuvor im Artikel erwähnten CSS-Eigenschaften.

1. Das Wichtigste ist, „rotateY“ zu verstehen, das sich buchstäblich um die y-Achse dreht:

Der Standardmittelpunkt des gedrehten Elements ist das Rotationszentrum (kann durch transform-origin geändert werden). Die x- und y-Achsen befinden sich im Diagramm und die z-Achse ist der Pfeil aus der Mitte heraus (es ist der Pfeil, der vom Bildschirm in Richtung Ihres Kopfes schießt).

In unserem Beispiel ist das Standardbild rotationY=0; der Mauszeiger ist rotationY=-180, eine negative Zahl bedeutet eine Drehung gegen den Uhrzeigersinn um die y-Achse, eine positive Zahl bedeutet eine Drehung im Uhrzeigersinn andere zwei Achsen;

Der Kern unseres Beispiels besteht darin, dass sich die Maus, wenn sie auf: Bild (p:first-child) zeigt, um 180 Grad gegen den Uhrzeigersinn um die y-Achse von 0 Grad auf -180 Grad dreht; Einführung (p:last-child) beginnt bei 180. Drehen Sie sich um 180 Grad gegen den Uhrzeigersinn um die y-Achse, um 0 Grad zu erreichen. Erzeugt den Effekt von zwei gleichzeitigen Drehungen gegen den Uhrzeigersinn. Einige Leute fragen sich vielleicht, warum die Standardeinleitung nicht 0 Grad beträgt. Beachten Sie hier, dass die Einleitung nach einer Drehung um 180 Grad gegen den Uhrzeigersinn in einem frontalen Zustand vorliegt. Wenn das Bild abgedeckt ist, entspricht dies einer Drehung um 180 Grad im Uhrzeigersinn gegenüber der Normalen Zustand, denn wenn die Maus zeigt, muss zur Normalität zurückgekehrt werden.

Perspektive gibt es einen Trick, um die Bühne (das übergeordnete Element der Animation) einzurichten.

Die 3D-Änderungen von Transform-style sind natürlich 3D, da gibt es nicht viel zu sagen.

Es gibt noch viele weitere Attribute im Zusammenhang mit dem 3D-Effekt von CSS3. Wenn möglich, werde ich in zukünftigen Beispielen bewusst ungenutzte Attribute verwenden~

Klicken Sie hier, um den Quellcode herunterzuladen. .

Wir freuen uns über jeden Rat~ Übrigens, dieses Beispiel muss unter Chrome ausgeführt werden, Chrome scheint es nicht sehr gut zu unterstützen, und Firebug wird selten verwendet~ Hehe~

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

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des CSS3-Mehrklassenselektors

Detaillierte Erläuterung der Verwendung des CSS-Hintergrunds- Anhang

CSS3-Animationsbeispiel für das Klicken zum Vergrößern

Das obige ist der detaillierte Inhalt vonBaidu Tiebas 3D-Karten-Flop-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!