Hướng dẫn Giới thiệu thuộc tính transform - transition trong CSS3

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,681
Giới thiệu thuộc tính transform - transition trong CSS3

Bài viết này sẽ 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: xoay đố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
Mã:
<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
Mã:
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.

Chúc các bạn thành công.


Nguồn: sothichweb.com​
 
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS CSS 0

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom