Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

    Hướng dẫn sử dụng 3D Transform trong CSS3

      Admin
      Admin

      Giới tính : Nam

      Đến từ : TPHCM

      Ngày Tham gia : 03/04/2011

      Tổng số bài gửi : 2292

      #1

       Thu Jul 05, 2012 8:29 pm

      Hướng dẫn sử dụng 3D Transform trong CSS3Hướng dẫn sử dụng 3D Transform trong CSS3 Huong-dan-su-dung-3d-transform-trong-css3

      Hiệu ứng 3D Transform CSS3 rất hay. Nhờ hiệu ứng này, bạn có thể tiết kiệm khá nhiều thời gian trong thiết kế và tạo ra những chuyển động đẹp mắt. Trong bài hướng dẫn lần này, Y2Graphic sẽ sử dụng hiệu ứng 3D Transform trong CSS3 để tạo ra một Portfolio đơn giản.
      HTML

      Do là một dạng Porfolio nên chủ yếu là hình ảnh. Bạn nên chuẩn bị một số file hình với kích thước là 266x186px. Bạn có thể thay đổi kích thước tùy theo yêu cầu của bạn.
      Code:
      <div class="thumb scroll">
          <div class="thumb-wrapper">
              <img src="/Đường dẫn của hình" alt="" />
              <div class="thumb-detail">
                  <a href="#" target="_blank">
                      Nội dung
                  </a>           
              </div>
          </div>
      </div>

      CSS
      Code:
      .thumb {
         display:block;
         width:266px;
         height:186px;
         position:relative;
         margin-bottom:20px;
         margin-right:20px;
         float:left;}
         
      .thumb-wrapper {
         display:block;
         width:100%;
         height:100%;}
         
      .thumb img {
         width:100%;
         height:100%;
         position:absolute;
         display:block;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;}
            
      .thumb .thumb-detail {
         display:block;
         width:100%;
         height:100%;
         position:absolute;         
         background:#000;
         font-family:arial;
         font-size:16px;}
            
      .thumb .thumb-detail a {
         display:block;
         width:90%;
         height:100%;
         text-transform:uppercase;
         color:#fff;
         text-decoration:none;      
         font-family: Arial, Helvetica, sans-serif;
         letter-spacing:-1px;
         padding:10px;   
         font-size:18px;
         text-align:center;}
      Do hiệu ứng 3D Transform chưa hỗ trợ hết tất cả các trình duyệt như Opera và IE9 nên chúng ta cần thêm một đoạn CSS.

      Code:

      .thumb.scroll {
          overflow: hidden;} 
       
      .thumb.scroll .thumb-detail {
          bottom:-280px;}
      Bây giờ, chúng ta thêm hiệu ứng 3D Transform cho những trình duyệt nào hỗ trợ.

      Code:
       
      .thumb.flip {
         -webkit-perspective:800px;      
         -moz-perspective:800px;
         -ms-perspective:800px;              
         -o-perspective:800px;
           perspective:800px;}
         
      .thumb.flip .thumb-wrapper {
         -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
         -ms-transition: -moz-transform 1s;
         -o-transition: -moz-transform 1s;
         transition: -moz-transform 1s;
         -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;         
         -ms-transform-style: preserve-3d;         
         -o-transform-style: preserve-3d;         
         transform-style: preserve-3d;}
            
      .thumb.flip .thumb-detail {
         -webkit-transform: rotateY(-180deg);
           -moz-transform: rotateY(-180deg);
           -ms-transform: rotateY(-180deg);
         -o-transform: rotateY(-180deg);
         transform: rotateY(-180deg);}
            
      .thumb.flip img,
      .thumb.flip .thumb-detail {
         -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
         -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
         backface-visibility: hidden;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         background-color:#333;}
            
      .thumb.flip .flipIt {
         -webkit-transform: rotateY(-180deg);
         -moz-transform: rotateY(-180deg);         
         -ms-transform: rotateY(-180deg);         
         -o-transform: rotateY(-180deg);         
         transform: rotateY(-180deg);}
      Javascript

      Cuối cùng, ta thêm đoạn Javascript trong đoạn

      Code:
      $(function () {
       
          // Utilize the modernzr feature support class to detect CSS 3D transform support
          if ($('html').hasClass('csstransforms3d')) { 
         
              // if it's supported, remove the scroll effect add the cool card flipping instead
              $('.thumb').removeClass('scroll').addClass('flip');   
             
              // add/remove flip class that make the transition effect
              $('.thumb.flip').hover(
                  function () {
                      $(this).find('.thumb-wrapper').addClass('flipIt');
                  },
                  function () {
                      $(this).find('.thumb-wrapper').removeClass('flipIt');         
                  }
              );
             
          } else {
             
              // CSS 3D is not supported, use the scroll up effect instead
              $('.thumb').hover(
                  function () {
                      $(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
                  },
                  function () {
                      $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');       
                  }
              );
       
          }
       
      });
      DOWNLAOD