Heim > Artikel > Web-Frontend > CSS3 realisiert einen dynamischen Flip-Effekt

CSS3 realisiert einen dynamischen Flip-Effekt

小云云Original: 2017-12-26 09:55:143444Durchsuche

Dieser Artikel ahmt die Spezialeffekte der 3D-Kartenumdrehungsanimation von Baidu Tieba nach und teilt hauptsächlich einen Spezialeffekt, der die neue CSS3-Funktionstransformation verwendet, um 3D-Kartenumdrehungs-Spezialeffekte zu erzielen. Freunde in Not können sich darauf beziehen. Ich hoffe, es hilft allen.

Heute werde ich einen mit CSS3 erstellten Karten-Flip-Effekt teilen. Der Effekt ist wie im Bild unten gezeigt. Wenn Sie diesen Effekt auf ein Fotoalbum anwenden, wird er auf jeden Fall sehr beeindruckend sein. Haha, super cool.

1. HTML-Code:

Da es in CSS3 implementiert ist, können Sie sehen, dass es keinen JS-Code gibt. ul ist eine Reihe von Bildern (da wir durch Klicken auf das Bild springen möchten, ist eines für die normale Anzeige (dh das Bild wird angezeigt) und das andere für). Anzeige nach dem Drehen des Bildes (d. h. Einleitung).

<!doctype html>
<html>
  <head>
    <meta charset="gb2312">
    <title>百度帖吧 CSS3 翻牌效果</title>
    <link rel="stylesheet" type="text/css" href="style/reset.css">
    <link rel="stylesheet" type="text/css" href="style/tieba.brand.css">
  </head>
  
  <body>
   <h1>百度帖吧 CSS3 翻牌效果</h1>
    <h2>powered by <a href="http://blog.wangjunfeng.com" target="_blank">射雕天龙的博客</a></h2>
    <p id="content">
     <ul>
       <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <p><img alt="" src="images/1.jpg"/></p>
            <p>
             <h3>漩涡鸣人</h3>
              <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
            </p>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <p>
             <img alt="" src="images/2.jpg"/>
            </p>
            <p>
             <h3>日向雏田</h3>
              <p>日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。</p>
            </p>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" 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="http://blog.wangjunfeng.com" target="_blank">
           <p>
             <img alt="" src="images/4.jpg"/>
            </p>
            <p>
             <h3>盒子先生</h3>
              <p>Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。</p>
            </p>
          </a>
        </li>
      </ul>
    </p>
  </body>
</html>

2. CSS3-Code

Ich habe an einigen Stellen Kommentare abgegeben, es sollte leicht verständlich sein.

#content ul{
 width:960px;
 padding:60px 0;
 margin:0 auto;
}
#content ul li{
 width:225px;
 height:180px;
 margin-right:20px;
 float:left;
}
#content ul li:last-child{
 margin-right: 0;
}
#content ul li a{
 display:block;
 height:180px;
 /*
 设置元素被查看位置的视图：
 perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
 */
 -webkit-perspective:500px; 
 -moz-perspective:500px;
 -ms-perspective:500px;
 perspective:500px;
 
 position: relative;
}
#content ul li a > p{
 top:0;
 left:0;
 width:100%;
 height:180px;
 color:#fff;
 
 /*
 指定嵌套元素如何在3D空间中呈现。
 */
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 
 /*
 隐藏被旋转的 p 元素的背面
 */
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 
 -webkit-transition:0.8s ease-in-out ;
 -moz-transition:0.8s ease-in-out ;
 -ms-transition:0.8s ease-in-out ;
 
 position:absolute;
}
#content ul li a p:first-child{
 -webkit-transform: rotateY(0);
 -moz-transform: rotateY(0);
 -ms-transform: rotateY(0);
 z-index: 2;
}
#content ul li a:hover p:first-child{
 -webkit-transform: rotateY(-180deg);
 -moz-transform: rotateY(-180deg);
 -ms-transform: rotateY(-180deg);
}
#content ul li a p:last-child{
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 z-index: 1;
 background:url(&#39;../images/bg.jpg&#39;) no-repeat;
}
#content ul li a:hover p:last-child{
 -webkit-transform: rotateY(0);
 -moz-transform: rotateY(0);
 -ms-transform: rotateY(0);
 z-index: 1;
}
#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;
}

3. Implementierungsprinzip

Der Mauszeiger ist standardmäßig rotationY=-180, eine negative Zahl, das heißt, wenn die Zahl positiv ist, ist sie im Uhrzeigersinn. Wenn die Maus auf: Bild zeigt (p: erstes Kind), von 0 Grad gegen den Uhrzeigersinn um die Y-Achse drehen, um 180 Grad auf - 180 Grad; Einführung (p:last-child) dreht um 180 Grad gegen den Uhrzeigersinn um die Y-Achse von 180 Grad auf 0 Grad. 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.

4. Quellcode-Download

http://xiazai.jb51.net/201605/yuanma/CSS3_BaiduTieba_Flop%28jb51.net%29.rar

5. Zusammenfassung

CSS3 bietet viele neue Funktionen wie Transformation. Wenn wir diese Funktionen verwenden, sind wir möglicherweise nur mit neuen Browsern kompatibel Solche alten Antiquitäten sind nicht sehr gut, aber ausreichend. Im obigen Beispiel werden beispielsweise in Browsern wie IE6, 7 und 8 keine Spezialeffekte angezeigt, sondern nur Bilder, und sie sind nicht hässlich. In anderen Browsern sind sie mit HTML5 und CSS3 kompatibel. In besseren Browsern können Sie die Spezialeffekte sehen. Es vermeidet die Verwendung von zu viel JS und erzielt einen coolen Anzeigeeffekt in neuen Browsern.

Verwandte Empfehlungen:

Detaillierte Erläuterung des Angularjs-Filters zur Implementierung dynamischer Such- und Sortierfunktionen

Schritte zur Implementierung des Effekts der dynamischen Erstellung wechselt mit Css3

Mehrere Möglichkeiten, dynamische Effekte in HTML 5 zu erstellen

Das obige ist der detaillierte Inhalt vonCSS3 realisiert einen dynamischen Flip-Effekt. 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 löschen Sie Floats in CSSNächster Artikel：So löschen Sie Floats in CSS

In Verbindung stehende Artikel

Mehr sehen