집 > 기사 > 웹 프론트엔드 > CSS3는 동적 뒤집기 효과를 실현합니다.

CSS3는 동적 뒤집기 효과를 실현합니다.

小云云원래의: 2017-12-26 09:55:143383검색

Baidu Tieba의 3D 카드 뒤집기 애니메이션 특수 효과를 모방한 이 기사는 주로 새로운 CSS3 기능 변환을 사용하여 3D 카드 뒤집기 특수 효과를 구현하는 특수 효과를 공유합니다. 그것이 모두에게 도움이 되기를 바랍니다.

오늘은 CSS3로 만든 카드 뒤집기 효과를 공유하겠습니다. 효과는 아래 그림과 같습니다. 이 효과를 사진 앨범에 적용하면 확실히 눈부실 것입니다. 하하, 정말 멋지네요.

1. HTML 코드:

CSS3로 구현했기 때문에 JS 코드가 없는 것을 볼 수 있습니다. ul은 그림 세트입니다. 각 li에는 a가 있습니다(그림을 클릭하여 이동하려고 하기 때문입니다). a에는 두 개의 p가 포함되어 있으며, 하나는 일반 표시용이고 다른 하나는 그림 표시용입니다. 사진이 회전된 후 표시됩니다(예: 소개).

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

곳곳에 댓글을 달았으니 이해하기 쉬울 것입니다.

#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. 구현 원리

기본 이미지 RotateY=0; 마우스 포인터는rotateY=-180이며, 음수는 y축을 중심으로 시계 반대 방향 회전을 의미하고, 양수는 시계 방향 회전을 의미합니다. two 동일한 원리가 축에 적용됩니다. 마우스가 다음을 가리킬 때 그림(p:first-child), y축을 중심으로 0도에서 -180도까지 시계 반대 방향으로 회전 소개(p:last-child)는 시계 반대 방향으로 회전합니다. y축을 중심으로 180도에서 180도에서 0도로. 두 개의 시계 반대 방향 회전 효과를 함께 만듭니다. 왜 기본 인트로가 0도가 아닌지 묻는 분들이 계시는데, 여기서 인트로는 반시계 방향으로 180도 회전한 후 정면 상태이므로 이미지가 가려지면 일반에서 시계 방향으로 180도 회전한 것과 같습니다. 상태, 왜냐하면 마우스 포인트가 정상 상태로 돌아가야 하기 때문입니다.

4. 소스 코드 다운로드

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

5.Summary

CSS3는 다음과 같은 많은 새로운 기능을 제공합니다. 변환과 같은 기능은 이러한 기능을 사용할 때만 새 브라우저와 호환될 수 있습니다. IE6, 7, 8과 같은 오래된 브라우저와는 잘 호환되지 않지만 예를 들어 위의 예에서는 IE6, 7로 충분합니다. , 8 이러한 브라우저는 특수 효과를 표시하지 않고 그림만 표시하며 HTML5 및 CSS3와 더 호환되는 다른 브라우저에서는 특수 효과를 볼 수 있습니다. JS를 너무 많이 사용하지 않고 새 브라우저에서 멋진 표시 효과를 얻을 수 있습니다.

CSS3는 동적 뒤집기 효과를 실현합니다.

관련 기사