Cách tạo hoạt hình lật nút 3D bằng CSS
Lật hình ảnh động là các hiệu ứng CSS phổ biến hiển thị cả phía trước và phía sau của một phần tử HTML bằng cách chuyển chúng từ trên xuống dưới hoặc từ trái sang phải (và ngược lại). Chúng là rad ở 2 chiều, nhưng chúng thậm chí còn tuyệt hơn khi được thực hiện ở chế độ 3D.
Trong bài đăng này, tôi sẽ chỉ cho bạn cách tạo các nút 3D đơn giản, và thêm hình ảnh động lật đối với họ.
Bạn có thể thấy kết quả trên bản demo bên dưới, nếu bạn nhấp vào nút, họ sẽ thực hiện hoạt hình lật có nhãn.
1. Tạo HTML cho nút 3D
Để tạo nút 3D (với Top → Lật dưới), trước tiên, chúng tôi xếp chồng ba Chúng tôi đặt Chúng tôi thêm hình ảnh nền vào mặt trước và mặt sau của nút và đặt độ dốc tuyến tính mát mẻ phía sau hình ảnh cho cả hai. Mẹo ở đây là trong CSS, bạn có thể đặt nhiều hình ảnh làm hình nền cho cùng một yếu tố và bạn cũng có thể khai báo độ dốc làm hình nền. Mặt giữa, Đến che không gian giữa mặt trước và mặt sau với mặt giữa, chúng tôi nằm giữa mặt phẳng trên mặt phẳng x của không gian 3D bằng cách sử dụng Vì mặt giữa được đặt phẳng trên mặt phẳng x, điểm trên cùng của trục y giảm 10px (một nửa chiều cao của nó) so với ban đầu. Vì vậy, để kéo nó trở lại và căn chỉnh đỉnh của nó với hai mặt nút khác, tôi đã thêm Tôi đã sử dụng Cho đến nay, bạn sẽ chỉ nhìn thấy mặt trước trên màn hình, vì mặt phẳng x bị ẩn khỏi tầm nhìn và trên mặt phẳng y (màn hình), mặt cuối cùng nằm xuống là mặt trước. Bằng cách xoay nút bạn cũng sẽ có thể nhìn thấy những khuôn mặt khác. Thuộc tính CSS kiểu biến đổi xác định xem các phần tử con của phần tử HTML được hiển thị phẳng hay được định vị trong không gian 3D. Trong đoạn mã dưới đây, Lưu ý rằng tôi đã sử dụng Tuy nhiên trong bước tiếp theo, chúng tôi sẽ thay đổi nó thành Tại thời điểm này, nút 3D của chúng tôi vẫn không hoạt hình. Chúng ta có thể làm điều này bằng cách sử dụng Hãy làm cho nút chỉ xoay khi di chuột, vì vậy thay vì Lưu ý rằng trong repo Github, tôi thêm một hộp kiểm cho mỗi nút để kích hoạt hoạt hình trên .flipBtn thùng chứa sẽ hoạt động như nút 3D và chúng tôi đặt nút 3D vào .flipBtnWrapper vỏ bánh.
2. Thêm các kiểu cơ bản với CSS
chiều rộng và Chiều cao các thuộc tính của trình bao bọc, nút và các mặt của nút và định vị chúng bằng kỹ thuật định vị tương đối / tuyệt đối. .flipBtnWrapper width: 200px; chiều cao: 200px; vị trí: tương đối; .flipBtn, .flipBtn_face chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối;
3. Tạo kiểu cho 3 mặt nút
.flipBtn_mid, được cho một Chiều cao 20px và cùng một không gian 20px được tạo giữa mặt trước và mặt sau. Chúng tôi đạt được sau này bằng cách sử dụng dịchZ () Hàm CSS di chuyển một phần tử dọc theo trục z. Chúng tôi đẩy mặt sau trở lại 10px và đưa mặt trước về phía trước thêm 10px. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), tuyến tính-gradient (# FF6366 50%, # FEA56E); backface-tầm nhìn: ẩn; biến đổi: translateZ (10px); .flipBtn_back phông nền: hình ảnh màu nền: xanh dương; biến đổi: translateZ (-10px); .flipBtn_mid height: 20px; màu nền: # d5485a; biến đổi: rotationX (90deg); đầu trang: -10px; biến đổi: rotationX (90deg); quy định rằng làm cho nó vuông góc cho cả hai mặt trước và mặt sau của mặt phẳng trên mặt phẳng y.đầu trang: -10px quy tắc là tốt.tầm nhìn phía sau Thuộc tính CSS cho mặt trước, vì vậy khi chúng ta lật nút, mặt sau của mặt trước sẽ không hiển thị.
4. Xoay nút
biến đổi-phong cách: bảo tồn-3d; quy tắc cung cấp âm lượng 3D cho nút của chúng tôi, trong khi biến đổi: rotationxX () thuộc tính xoay nó quanh trục x. .flipBtn Transform-style: reserved-3d; biến đổi: rotationX (-120deg);
-120deg chỉ dành cho mục đích trình diễn, vì theo cách này, việc minh họa cách xoay nút hoạt động dễ dàng hơn.
-180d để làm cho nút hoàn toàn lật xung quanh.5. Hoạt hình nút
quá độ bất động sản. Chúng tôi sử dụng biến đổi thuộc tính cho giá trị đầu tiên, vì đây là thuộc tính chúng tôi muốn áp dụng hiệu ứng chuyển tiếp cho. Giá trị thứ hai, là thời lượng, 2s..flipBtn bộ chọn, hãy sử dụng .flipBtnWrapper: di chuột .flipBtn. Như đã đề cập trước đó, cũng thay đổi giá trị của xoayX () đến -180d để làm cho nút lật xung quanh. .flipBtn quá trình chuyển đổi: biến đổi 2s; biến đổi-phong cách: bảo tồn-3d; .flipBtnWrapper: hover .flipBtn Transform: rotationX (-180deg);
:đã kiểm tra hơn là trên :bay lượn, cách này nó hoạt động giống như một nút thực sự. Tôi cũng bao gồm bốn nút khác nhau với bốn hướng lật (Trên → Dưới, Dưới → Trên, Phải → Trái và Trái → Phải), để bạn có thể dễ dàng sử dụng bất cứ điều gì bạn muốn.
