CSS 3 동적 리 메 이 크 효과 구현

6899 단어 CSS3패 를 뒤집다특수효과
오늘 CSS 3 가 만 든 카드 뒤 집기 효 과 를 공유 합 니 다.효 과 는 다음 그림 과 같 습 니 다.이 효 과 를 앨범 에 적용 하면 분명 멋 있 을 것 입 니 다.하하,멋있다.
//img.jbzj.com/file_images/article/201605/2016511113255203.gif
1.HTML 코드:
CSS 3 구현 이기 때문에 어떠한 JS 코드 도 보이 지 않 는 다.l 은 한 그룹의 그림 입 니 다.모든 li 에는 a 가 있 습 니 다.(그림 을 클릭 하면 점프 할 수 있 기 때 문 입 니 다)a 에는 두 개의 div 가 포함 되 어 있 습 니 다.하 나 는 정상적으로 표 시 될 때(즉,그림 표시)이 고 하 나 는 그림 이 회전 한 후에 표 시 됩 니 다.(즉,소개)

<!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>
    <div id="content">
     <ul>
       <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div><img alt="" src="images/1.jpg"/></div>
            <div>
             <h3>    </h3>
              <p>           《    》    。              ，                 ，             ，           。</p>
            </div>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div>
             <img alt="" src="images/2.jpg"/>
            </div>
            <div>
             <h3>    </h3>
              <p>           《    》  3    。         ，               。      ，           ，               ，             。</p>
            </div>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div><img alt="" src="images/3.jpg"/></div>
            <div>
             <h3>  ・D・  </h3>
              <p>  ・D・           《   》     。        《   》     。       ，            ―― ONE PIECE，     。</p>
            </div>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div>
             <img alt="" src="images/4.jpg"/>
            </div>
            <div>
             <h3>    </h3>
              <p>Danbo       DIY       ，            ，         ，       ，Danbo          ，          ，               。</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
2.CSS 3 코드
나 는 이미 안쪽 부분 에 주석 을 달 았 으 니 쉽게 이해 할 수 있 을 것 이다.

#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 > div{
 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;
 
 /*
        div      
 */
 -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 div:first-child{
 -webkit-transform: rotateY(0);
 -moz-transform: rotateY(0);
 -ms-transform: rotateY(0);
 z-index: 2;
}
#content ul li a:hover div:first-child{
 -webkit-transform: rotateY(-180deg);
 -moz-transform: rotateY(-180deg);
 -ms-transform: rotateY(-180deg);
}
#content ul li a div:last-child{
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 z-index: 1;
 background:url('../images/bg.jpg') no-repeat;
}
#content ul li a:hover div:last-child{
 -webkit-transform: rotateY(0);
 -moz-transform: rotateY(0);
 -ms-transform: rotateY(0);
 z-index: 1;
}
#content ul li a div 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 div p{
 padding:0 10px;
 font-size: 12px;
 text-indent: 2em;
 line-height:18px;
}
3.실현 원리
기본 그림 rotateY=0;마우스 가 가리 키 는 것 은 rotate Y=-180,음수,즉 시계 반대 방향 으로 Y 축 을 돌 고 정 수 는 시계 반대 방향 이다.다른 두 축 은 같은 이치 이다.마우스 가 가리 킬 때:그림(div:first-child),0 도 에서 y 축 을 시계 반대 방향 으로 180 도 회전 하여-180 도 에 도달 합 니 다.소개(div:last-child)180 도 에서 y 축 을 시계 반대 방향 으로 180 도 회전 하여 0 도 에 도달 합 니 다.두 개의 시계 반대 방향 으로 회전 하 는 효 과 를 가 져 옵 니 다.기본 값 이 0 도 가 아 닌 이 유 를 묻 는 사람 도 있 을 수 있다.여기 서 는 시계 반대 방향 으로 180 도 회전 한 뒤 긍정 적 인 상 태 를 소개 하기 때문에 배 그림 이 가 려 질 때 정상 상태 에서 시계 반대 방향 으로 180 도 회전 한 셈 이다.마우스 가 가리 킬 때 정상 상태 로 돌아 가 야 하기 때문이다.
소스 코드 다운로드
http://xiazai.jb51.net/201605/yuanma/CSS3_BaiduTieba_Flop%28jb51.net%29.rar
총화
CSS 3 는 transform 과 같은 새로운 특성 을 많이 제공 합 니 다.우 리 는 이러한 특성 을 사용 할 때 새로운 브 라 우 저 만 호 환 할 수 있 습 니 다.IE6,7,8 과 같은 오래된 골동품 을 호 환 하 는 것 이 좋 지 않 지만 이 정도 면 충분 합 니 다.예 를 들 어 위의 예 는 IE6,7,8 등 탐색 기 에서 특수 효 과 를 나타 내지 않 고 그림 만 표시 하 며 보기 싫 지 않 습 니 다.HTML 5 와 CSS 3 를 호 환 하 는 다른 브 라 우 저 에서 필 터 를 볼 수 있 습 니 다.과도 한 JS 사용 을 피 하 는 동시에 새로운 브 라 우 저 에 멋 진 효 과 를 나타 내 는 효 과 를 얻 었 다.
Oracle undo_management 매개 변수 일치 하지 않 음 오류
Oacle 데이터베이스 콜 드 백업 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage