công ty thiết kế website tốt nhất

Thuộc tính xoay ảnh trong CSS3 06/05/2020

Thuộc tính xoay ảnh trong CSS3

Posted by Admin in HTML CSS
5214
Tải về Xem Demo

Bài này tôi sẽ trình bày cách sử dụng thuộc tính trong CSS3  để tạo 1 Gallery ảnh đơn giản.
Trước đây để chèn 1 bức ảnh có hiệu ứng xoay nghiêng thì chúng ta phải xoay bức ảnh đó bằng Photoshop và up lên, nhưng bây giờ với CSS3 thì chúng ta không cần phải làm thao tác đó mà ảnh vẫn nghiêng thoải mái được. Đó là transform. Hãy nhìn bức ảnh dưới được xoay bằng transform.

Bây giờ tôi sẽ áp dụng thuộc tính này để tạo 1 Gallery ảnh, ở đây tôi làm 1 Gallery gồm có 6 ảnh về em SON EUN SEO, hâm mộ em này :D   

Bước đầu tiên, tôi tạo 1 file HTML như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="gallery">
<div class="anh_1">
<img src="/img/son_eun_seo.jpg" />
</div>
<div class="anh_2">
<img src="/img/son_eun_seo_1.jpg"  />
</div>
<div class="anh_3">
<img src="/img/son_eun_seo_2.jpg"  />
</div>
<div class="anh_4">
<img src="/img/son_eun_seo_3.jpg"  />
</div>
<div class="anh_5">
<img src="/img/son_eun_seo_4.jpg" />
</div>
<div class="anh_6">
<img src="/img/son_eun_seo_5.jpg"  />
</div>
<div class="clear"></div>
</div>
</body>
</html>
Tạo 1 thẻ div bao ngoài với class là gallery.
Trong cặp thẻ div này tôi chèn thêm 6 cặp thẻ div khác, với thuộc tính float: left. Và trong 6 thẻ div này tôi chèn 6 bức ảnh của em Son Eun Seo
Bây giờ thì viết mã css như sau:

/* css cho thẻ Div có class gallery */
.gallery {
margin: 0 auto;  /* Căn cho thẻ div (gallery) này này nằm giữa trình duyệt */
width: 780px;
height: auto;
padding: 0px 50px 30px 0px;
}
/* css toàn bộ thẻ img nằm trong div (gallery) */
.gallery   img {
width: 150px;  /* đặt chiều rộng cho ảnh bằng css, nếu đặt như thế này thì ở thẻ img chúng ta k thêm thuộc tính width và height */
border: 5px solid #fbf2db;  /* Dường viền xung quang ảnh */
border-radius: 5px;    /* Bo tròn 4 góc của ảnh */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
box-shadow: 2px 2px 3px #000; /*Tạo bóng đổ cho ảnh */
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
}
.anh_xoay  img:hover {
border: 5px solid #d4d4d4;  /* hiệu ứng thay đổi đường bao ngoài của ảnh khi trỏ con chuột qua ảnh */
} 
/*  CSS cho các thẻ div bao của ảnh, các thẻ div này có thuộc tính nào chung thì chúng ta sẽ gom lại như sau, ở đây chúng có các thuộc tính float, width, margin,border-radius, box-shadow giống nhau nên tôi gom lại làm 1  */
.anh_1, .anh_2, .anh_3, .anh_4, .anh_5, .anh_6 {
float: left;
width: 160px;
margin-top: 50px;
margin-left: 80px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 3px 3px 2px #000;
-moz-box-shadow: 3px 3px 2px #000;
-webkit-box-shadow: 3px 3px 2px #000;
}
/*  CSS cho div chứa ảnh 1, tại đây tôi sẽ xoay cái div này, và thêm thuộc tính backrgound */
.anh_1 {
background:#91cee7;
transform: rotate(4deg); // xoay thẻ div lệch sang bên phải với 4deg
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);  
}
/* css cho thẻ img trong thẻ div(anh_1)
.anh_1 img {
transform: rotate(5deg); // xoay ảnh lệch sang bên phải với 5deg
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);  
}
Tương tụ css cho các cặp thẻ div và img còn lại, chúng ta sẽ thay đổi màu background của các div chứa ảnh và góc xoay của các ảnh tương ứng để có các hiệu ứng khác nhau.
 
/*  Div Anh 2 */      
.anh_2 {
background:#f8be62;
transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);  
}
.anh_2 img {
transform: rotate(-5deg); // xoay ảnh lệch sang bên tría với 5deg
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);  
}      
/*  Div Anh 3 */
.anh_3 {
background: #96d355;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);  
}
.anh_3 img {
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);  
}
/*  Div Anh 4 */  
.anh_4 {
background: #c077ee;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);  
}  
.anh_4 img {
transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);  
}
/*  Div Anh 5 */  
.anh_5 {
background: #e73e11;
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);  
}  
.anh_5 img {
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);  
}
/*  Div Anh 6 */  
.anh_6 {
background: #f3f6f8;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);  
}  
.anh_6 img {
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);  
}                 
.clear {clear: both;}    /* Khử thuộc tính float: left của mấy div bao ảnh */

Các bạn có thể xem demo và tải source code về và sáng tạo thêm các Gallery đẹp khác với CSS3 :-)

Blog