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

   
 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