CSS3 réalise un effet de retournement dynamique-tutoriel CSS-php.cn

CSS3 réalise un effet de retournement dynamique

小云云

Libérer： 2017-12-26 09:55:14

original

3380 Les gens l'ont consulté

Imitant les effets spéciaux de l'animation de retournement de carte 3D de Baidu Tieba, cet article partage principalement un effet spécial qui utilise la nouvelle fonctionnalité CSS3 de transformation pour obtenir des effets spéciaux de retournement de carte 3D. Les amis dans le besoin peuvent s'y référer. J'espère que cela aide tout le monde.

Aujourd'hui, je vais partager un effet de retournement de carte réalisé avec CSS3. L'effet est comme le montre l'image ci-dessous. Si vous appliquez cet effet à un album photo, il sera certainement très éblouissant. Haha, super cool.

CSS3 réalise un effet de retournement dynamique

1. Code HTML :

Parce qu'il est implémenté en CSS3, vous pouvez voir qu'il n'y a pas de code JS. ul est un ensemble d'images. Chaque li a un a (car nous voulons sauter en cliquant sur l'image). a contient deux p, l'un est pour l'affichage normal (c'est-à-dire que l'image est affichée) et l'autre est pour l'affichage normal. affichage après la rotation de l’image (c’est-à-dire introduction).

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

Copier après la connexion

2. Code CSS3

J'ai fait des commentaires à certains endroits, ça devrait être facile à comprendre.

#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;
}

Copier après la connexion

3. Principe de mise en œuvre

L'image par défaut rotateY=0; le pointeur de la souris est rotateY=-180, un nombre négatif, c'est-à-dire tourner dans le sens inverse des aiguilles d'une montre autour de l'axe y. Si le nombre est positif, il est dans le sens des aiguilles d'une montre. Lorsque la souris pointe sur : image (p : premier enfant), rotation dans le sens inverse des aiguilles d'une montre autour de l'axe y de 0 degrés 180 degrés à - 180 degrés ; introduction (p:last-child) tourne de 180 degrés dans le sens antihoraire autour de l'axe y de 180 degrés à 0 degrés. Crée l’effet de deux rotations simultanées dans le sens inverse des aiguilles d’une montre. Certaines personnes peuvent se demander pourquoi l'introduction par défaut n'est pas à 0 degré. Notez ici que l'introduction est dans un état frontal après avoir été tournée de 180 degrés dans le sens inverse des aiguilles d'une montre, donc lorsque l'image est couverte, cela équivaut à une rotation de 180 degrés dans le sens des aiguilles d'une montre par rapport à la normale. état, car lorsque la souris pointe, il faut revenir à la normale.

4. Téléchargement du code source

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

5. Résumé

CSS3 fournit de nombreuses nouvelles fonctionnalités telles que la transformation Lorsque nous utilisons ces fonctionnalités, nous ne pouvons être compatibles qu'avec les nouveaux navigateurs IE6, 7 et 8. de ces vieilles antiquités n'est pas très bon, mais c'est suffisant. Par exemple, dans l'exemple ci-dessus, dans les navigateurs tels que IE6, 7 et 8, aucun effet spécial n'est affiché, seules les images sont affichées et elles ne sont pas laides. Dans d'autres navigateurs, ils sont compatibles avec HTML5 et CSS3. Dans les meilleurs navigateurs, vous pouvez voir les effets spéciaux. Cela évite d'utiliser trop de JS et obtient un effet d'affichage sympa dans les nouveaux navigateurs.

Recommandations associées :

Explication détaillée du filtre Angularjs pour implémenter des fonctions de recherche et de tri dynamiques

Étapes pour implémenter l'effet de création dynamique commutateurs avec Css3

Plusieurs façons de créer des effets dynamiques en HTML 5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!