Hoạt hình lật Css3

Một phần của thiết kế cho Hiệp hội Hackney Southampton bao gồm một mạng lưới các nhà tài trợ. Thiết kế sao cho khi di chuột hoặc nhấp chuột, họ sẽ lật qua để lộ số liên hệ, địa chỉ email hoặc URL. Chúng tôi muốn trang web này hoạt động trên các trình duyệt không hỗ trợ chuyển đổi 3D, vì vào thời điểm đó, chỉ có webkit mới hỗ trợ

Đường dẫn mã cho các trình duyệt có chuyển đổi 3D

Mã được sử dụng chính xác như trên. Đánh dấu bao gồm một div, chứa hai div cho mặt sau và mặt trước

dự phòng

Trong các trình duyệt cũ hơn, jQuery Flip được sử dụng. Modernizr được sử dụng để phát hiện hỗ trợ cho các biến đổi 3D và nếu không, phần đánh dấu sẽ được thay đổi để phù hợp với cách jQuery flip yêu cầu. Phần quan trọng là đối với các trình duyệt thông thường, các biến đổi 3D bình thường được sử dụng, không cần có bất kỳ thứ gì cần thiết để làm cho nó hoạt động

Do sự cố khiến jQuery flip hoạt động khi di chuột, hành vi đã được thay đổi thành hoạt động khi nhấp

Sử dụng kỹ thuật này, hiệu ứng hoạt động trên tất cả các trình duyệt đang sử dụng, trở lại IE6. Hiệu ứng lật có chất lượng cao hơn nhiều trên các trình duyệt hỗ trợ chuyển đổi 3D, nhưng vẫn có giao diện đặc biệt trên các trình duyệt cũ hơn. Khi chúng tôi tiến lên phía trước, tỷ lệ người dùng đạt được dự phòng sẽ giảm xuống

Bây giờ chúng tôi có tất cả các công cụ để bắt đầu tạo các đối tượng 3D. Hãy bắt đầu với những điều cơ bản, lật một thẻ

Đây là đánh dấu cơ bản chúng ta sẽ cần

  

    
front
    
back
  

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

0 sẽ chứa không gian 3D.

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

1 đóng vai trò là đối tượng 3D. Hai yếu tố

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

0 riêng biệt được sử dụng cho các mặt của thẻ. Tôi khuyên bạn nên sử dụng cùng mẫu này cho bất kỳ chuyển đổi 3D nào. cảnh, đối tượng và khuôn mặt. Giữ phần tử không gian 3D và phần tử đối tượng tách biệt sẽ thiết lập một mô hình đơn giản để hiểu và dễ tạo kiểu hơn

Chúng tôi đã sẵn sàng cho một số phong cách 3D. Đầu tiên, áp dụng

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

1 cần thiết cho không gian 3D chứa, cùng với mọi kích thước hoặc kiểu định vị

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

Giờ đây, phần tử

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

1 có thể được chuyển đổi trong không gian 3D của cha mẹ nó. Chúng tôi sẽ thêm

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

3 và

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

4 để

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

5 của thẻ sẽ xuất hiện ở giữa hộp chứa. Thông tin thêm về

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

5 sau.

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

7 được sử dụng để định vị các mặt thẻ một cách tuyệt đối

Hãy thêm một chuyển đổi CSS3 để người dùng có thể thấy chuyển đổi có hiệu lực

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

1 của một phần tử chỉ áp dụng cho con cháu trực tiếp, trong trường hợp này là

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

1. Để những đứa trẻ tiếp theo kế thừa phối cảnh của cha mẹ và sống trong cùng một không gian 3D, cha mẹ có thể chuyển phối cảnh của nó với

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

0. Nếu không có 3D

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

1, các mặt của thẻ sẽ bị làm phẳng cùng với bố mẹ của nó và chuyển động xoay của mặt sau sẽ bị vô hiệu hóa

Để định vị các khuôn mặt trong không gian 3D, chúng tôi sẽ cần đặt lại vị trí của chúng ở dạng 2D với

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

2. Để ẩn mặt sau của khuôn mặt khi chúng quay mặt đi khỏi người xem, chúng tôi sử dụng

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

3

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

5

Để lật

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

4, chúng tôi thêm một biến đổi 3D cơ bản của

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

5

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

8

Với các mặt đã được đặt đúng vị trí,

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

1 yêu cầu một kiểu tương ứng khi nó được lật

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

9

Bây giờ chúng ta có một đối tượng 3D đang hoạt động. Để lật bài, chúng ta có thể lật lớp

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

7. Khi

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

8,

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

1 sẽ xoay 180 độ, do đó để lộ

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

4

Chỉnh sửa bản trình diễn này trên CodePen

trượt-lật

Xem lại quá trình chuyển đổi 3D của Ứng dụng thời tiết. Bạn sẽ nhận thấy rằng nó không hoàn toàn có tác dụng như bản demo trước của chúng tôi. Nếu bạn đi theo cạnh bên phải của thẻ, bạn sẽ thấy rằng thẻ vẫn phẳng với hộp chứa. Thay vì xoay từ trung tâm nằm ngang, nó xoay trên cạnh phải đó. Nhưng quá trình chuyển đổi không chỉ là xoay – cạnh di chuyển theo chiều ngang từ phải sang trái. Chúng tôi có thể tạo lại quá trình chuyển đổi này chỉ bằng cách sửa đổi một vài dòng CSS từ bản trình diễn lật thẻ ban đầu của chúng tôi

Điểm xoay cho vòng quay xảy ra ở phía bên phải của thẻ. Theo mặc định,

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

5 của một phần tử nằm ở tâm theo chiều ngang và chiều dọc của nó (

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

52 hoặc

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

53). Biến đổi của một phần tử được áp dụng từ

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

5 của nó. Hãy thay đổi nó sang bên phải

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

7

Lần lật đó bây giờ cần một số chuyển động ngang với

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

55. Chúng tôi sẽ đặt xoay thành

.scene {
  width: 200px;
  height: 260px;
  perspective: 600px;
}

56 để nó lật mặt phải ra ngoài

Lật trong CSS là gì?

Làm thế nào để làm cho thẻ lật trực tuyến?

Làm cách nào để lật thẻ trong JavaScript?