CSS3 transform - transition

CSS3 transform - transition

CSS3 transform - transition

Bài này xin giới thiệu về 2 bộ thuộc tính rất tuyệt vời của CSS3 là transform và transition đồng thời là một ví dụ gallery nhỏ với sự kết hợp của 2 bộ thuộc tính này.

Transform

Đây là thuộc tính với một số giá trị cung cấp một số chức năng thao tác với đối tượng như:

  • scale: co giãn đối tượng
  • rotate: xoai đối tượng
  • skew: bóp méo đối tượng
  • translate: dịch chuyển đối tượng

Transition

Thuộc tính này giúp bạn tạo hoạt hình cho một thuộc tính nào đó đó là thuộc tính dạng shorthand của các thuộc tính như:

  • transition-property: thuộc tính sẽ áp dụng
  • transition-duration: thời gian hoàn thành hiệu ứng tính bằng milliseconds
  • transition-timing-function: xác định kiểu thời gian thực hiện hiệu ứng bao gồm một số giá trị như linear, ease, ease-in, ease-out, ease-in-out, và cubic-bezier(n,n,n,n) kiểu thời gian tùy chỉnh với n nhận giá trị từ 0 - 1
  • transition-delay: thời gian dừng trước khi bắt đầu hiệu ứng tính bằng milliseconds

Ví dụ photo gallery

HTML code

Chuẩn bị một số hình ảnh với kích thước là 250px - 180px

<ul>
  <li><a href="#"><img src="images/1.jpg" /></a></li>
  <li><a href="#"><img src="images/2.jpg" /></a></li>
  <li><a href="#"><img src="images/3.jpg" /></a></li>
  <li><a href="#"><img src="images/4.jpg" /></a></li>
  <li><a href="#"><img src="images/5.jpg" /></a></li>
  <li><a href="#"><img src="images/6.jpg" /></a></li>
  <li><a href="#"><img src="images/7.jpg" /></a></li>
  <li><a href="#"><img src="images/8.jpg" /></a></li>
  <li><a href="#"><img src="images/9.jpg" /></a></li>
</ul>

CSS code

ul{
  margin:50px auto;
  list-style:none;
  min-height: 400px
}
ul li{
  display:inline-block;
  float:left;
  padding:10px;
  position: relative;
  width: 210px;
  height: 154px;
}
li a{
  position: absolute; left: 0; top: 0;
  padding:5px;
  border:1px solid #ccc;
  display:block;
  background: #fff;
  background:rgba(255,255,255,0.5);
}
ul img{width: 200px; border: none;}
/*------- Css3 transform --------*/
li a:hover{
  z-index:999;
  transform: scale(1.5);
  -ms-transform: scale(1.5); /* Cho IE9 */
  -webkit-transform: scale(1.5); /* Chrome và Safari */
  -moz-transform: scale(1.5); /* Firefox */
  -o-transform:scale(1.5); /* Opera */
}
/*------- Css3 Transition --------*/
a{
  transition: transform 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease; /* Chrome và Safari */
  -moz-transition: -moz-transform 0.5s ease; /* Firefox 4 */
  -o-transition: -o-transform 0.5s ease; /* Opera */
}

Ở đoạn code trên với sự kết hợp giữa thuộc tính transform và transition thì kết quả đạt được là hình thumnail trong gallery sẽ có hiệu ứng tăng kích thước lên 1.5 lần khi người dùng hover chuột lên nó. Vì mỗi trình duyệt sẽ có cách gọi thuộc tính riêng nên chúng ta phải gọi thuộc tính làm nhiều lần tương ứng với mỗi loại trình duyệt

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Sáng chế mới của Apple: MacBook lai máy tính bảng

Sáng chế mới của Apple: MacBook lai máy tính bảng

MacBook sẽ có khả năng xoay màn hình thành máy tính bảng, lại có thêm ăng-ten đem đến khả năng của chiếc điện thoại.

Drupal world có cần Kalabox? và kalabox là gì

Drupal world có cần Kalabox? và kalabox là gì

Before Kalabox, developers lost time performing repeatable tasks like setting up local development servers, constructing vhosts and configuring advanced functionality. Kalabox brings advanced tools together and puts them in the hands of novices and pros via a one-click installer.

25% trong số 1000 website hàng đầu thế giới sử dụng nginx

25% trong số 1000 website hàng đầu thế giới sử dụng nginx

Nginx là một máy chủ Web mã nguồn mở có hiệu năng rất cao.

Công ty diệt chuột T&C

 

Diet con trung