Trong vài năm qua, CSS đã phát triển hơn những gì chúng ta có thể tưởng tượng. Việc tạo kiểu và bố cục giờ đây hoàn toàn nằm trong tay chúng tôi, mặc dù điều tốt nhất về CSS3 trong mắt tôi là các Chuyển đổi, đặc biệt là các chuyển đổi 3D
Với các phép biến đổi, chúng ta có thể di chuyển các phần tử trong thế giới 3D và hôm nay tôi sẽ chứng minh điều này bằng cách tạo hiệu ứng lật
hỗ trợ trình duyệt
Trình duyệt hỗ trợ chuyển đổi 3D còn thiếu một chút, nhưng nhìn chung không quá tệ. Nó được hỗ trợ bởi tất cả các trình duyệt webkit sử dụng tiền tố webkit, bởi Firefox sử dụng phiên bản miễn phí tiền tố và thậm chí nó còn được hỗ trợ một phần bởi IE10 [IE10 không hỗ trợ thuộc tính bảo tồn-3d cho phép chúng tôi lồng các phần tử]
Khi nói đến di động, IE Mobile gặp vấn đề tương tự như IE10 và Opera mini không hỗ trợ. Mọi thứ khác hoạt động như bạn mong muốn
Tạo hiệu ứng của chúng tôi
Để tạo hiệu ứng này, chúng ta sẽ bắt đầu bằng cách nhập một số HTML rất đơn giản, tôi vừa tạo một phần chứa cả div cho mặt trước và một cho mặt sau của hiệu ứng lật của chúng ta. Sau đó, tôi đã thêm tiêu đề và hình ảnh vào cả hai div
My Cat
My other Cat
Tiếp theo, hãy thiết lập một số CSS cho hình ảnh và tiêu đề của chúng ta
img {
border-radius: 10px;
box-shadow: 1px 2px 5px rgba[0,0,0,0.5];
}
h1 {
color: #1C1C1C;
font-family: 'Pacifico', arial;
font-weight: bold;
font-size: 24px;
text-align: center;
}
Tiếp theo, chúng tôi sẽ thêm một số kiểu để kiểm soát khía cạnh 3D của hiệu ứng của chúng tôi
section{
width: 200px;
height: 300px;
margin-left: 300px;
margin-top: 200px;
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
perspective: 500;
transform-style: preserve-3d;
transition: transform 1.5s;
}
Đầu tiên chúng ta thiết lập chiều rộng và chiều cao. Sau đó, một số lợi nhuận. Tiếp theo, chúng tôi đặt phối cảnh thành 500 [xác định phần tử cách màn hình bao xa]. Tiếp theo, chúng tôi bảo toàn 3D để các phần tử con kế thừa 3D. Cuối cùng, chúng tôi thiết lập quá trình chuyển đổi, vì vậy thay đổi sẽ diễn ra trong hơn 1. 5 giây
Bây giờ chúng ta cần xem thuộc tính khả năng hiển thị của backface để div bị ẩn khỏi chế độ xem không chồng lên div mà chúng ta có thể thấy
div {
display: block;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
Cuối cùng, chúng ta cần đặt div phía sau được lật ngay từ đầu, để khi chúng ta lật phần tử 180 độ khi di chuột, div phía sau sẽ xoay vào chế độ xem
.back {
-webkit-transform: rotateY[180deg];
transform: rotateY[180deg];
}
Với tất cả những gì đã làm, chúng ta chỉ cần xoay toàn bộ phần tử 180 độ khi nó lăn qua
section:hover {
-webkit-transform: rotateY[-180deg];
transform: rotateY[-180deg];
}
Toàn bộ CSS như sau
img {
border-radius: 10px;
box-shadow: 1px 2px 5px rgba[0,0,0,0.5];
}
h1 {
color: #1C1C1C;
font-family: 'Pacifico', arial;
font-weight: bold;
font-size: 24px;
text-align: center;
}
section{
width: 200px;
height: 300px;
margin-left: 300px;
margin-top: 200px;
-webkit-perspective: 500;
perspective: 500;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
}
div {
display: block;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
-webkit-transform: rotateY[180deg];
transform: rotateY[180deg];
}
section:hover {
-webkit-transform: rotateY[-180deg];
transform: rotateY[-180deg];
}
Và bạn có thể xem demo tại đây
Như bạn có thể thấy, chỉ sử dụng CSS, chúng tôi đã có thể tạo ra một hiệu ứng khá ngọt ngào. Đây mới chỉ là bước khởi đầu của các chuyển đổi 3D CSS3, hãy nghiên cứu các thuộc tính này và bạn sẽ có thể tạo một số hiệu ứng tuyệt vời hơn nữa
Hình ảnh được lật để tạo ra một hình ảnh phản chiếu. Lật hình ảnh có nghĩa là xoay hình ảnh theo chiều ngang hoặc chiều dọc. Trong hướng dẫn này, chúng ta sẽ tìm hiểu về thuộc tính CSS để lật một hình ảnh
Lật ảnh bằng CSS
Thuộc tính transform: scalex[-1]
được sử dụng để lật hình ảnh. Thuộc tính biến đổi được sử dụng để xoay hình ảnh và scalex[-1]
xoay hình ảnh thành đối xứng trục. Do đó, hình ảnh ban đầu được lật thành hình ảnh phản chiếu của nó
Thí dụ. Lật ảnh bằng CSS
Trong ví dụ này, chúng tôi đã lật hình ảnh để tạo ra hình ảnh phản chiếu
HTML
.flip-img {
transform: scalex[-1];
}
Original image
flip image
đầu ra
Đây là đầu ra của ví dụ trên
Thí dụ. Lật ảnh theo chiều dọc
Ngoài ra, chúng ta có thể sử dụng_______10_______ để lật hình ảnh. Ở đây, chúng tôi đã xoay hình ảnh 180 độ
Phần kết luận
Trong hướng dẫn này, chúng ta đã học cách lật hình ảnh bằng CSS. Chúng ta có thể làm như vậy bằng cách sử dụng thuộc tính transform
. Ta có thể lật ảnh theo chiều ngang hoặc chiều dọc tùy theo lựa chọn của mình