5 ví dụ về Flip Animation CSS – hoạt ảnh css xoay 180 độ

Chúng ta cùng xem qua 5 ví dụ về việc sử dụng hoạt ảnh lật với CSS. Hình ảnh động lật rất thích hợp để sử dụng trên các blog mà bạn muốn có thẻ xem trước bài viết trên blog. Bạn cũng có thể sử dụng tính năng này cho thư viện ảnh để hiển thị một số tương tác thú vị cho người dùng

Bạn đang xem: hoạt ảnh css xoay 180 độ

Trong bài viết này, chúng ta sẽ đi thông qua 5 ví dụ về việc sử dụng hoạt ảnh lật với CSS. Hình ảnh động lật rất tuyệt vời để sử dụng trên các blog mà bạn muốn có thẻ xem trước
bài viết trên blog. Bạn cũng có thể sử dụng nó cho thư viện ảnh để hiển thị một số tương tác thú vị cho người dùng.

Để tạo hoạt ảnh lật, chúng ta phải sử dụng thuộc tính CSS @keyframe
và chuyển đổi bằng cách sử dụng các hàm xoayX () xoayY () .

Ví dụ 1 – thẻ lật ngang

Đối với ví dụ đầu tiên của chúng tôi, chúng tôi sẽ tạo hiệu ứng thẻ lật ngang. Thiết kế này thường xuất hiện trên các blog hoặc trang web thư viện. Kết quả
trông như sau:

Xem Bút
Lật thẻ
bởi ⭐ Kentaro ⭐ ( @kentaro_au )
trên CodePen .

Chúng tôi bắt đầu với HTML của mình để tạo các thẻ như sau:

  

& lt;

a

lớp

=

" thẻ "

href

< p class = "o"> =

"#!"

& gt;

& lt;

div

class

= < / p>

"front"

style

=

" background-image: url (// source.unsplash.com/300x404) "

& gt;

& lt;

p

& gt;

Lorem ipsum dolor sit amet consectetur adipisi. < p class = "p"> & lt; /

p

& gt;

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"quay lại"

& gt;

& lt;

div

& gt;

& lt;

p

& gt;

Consectetur adipisicing elit. Possimus, praesentium?

& lt; /

p

& gt;

& lt;

p

& gt;

Nhà cung cấp consectetur natus voluptatem quis tenetur sed beatae eius sint.

& lt; /

p

& gt;

Nút

& lt;

class

= < / p>

"button"

& gt;

Nhấp vào đây

& lt; /

< nút p class = "nt">

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

a

& gt;

Giải thích

Đối với HTML ở trên, chúng tôi có ba phần quan trọng chính:

  • lớp thẻ – đây là lớp chính để tạo kiểu cho mỗi thẻ của chúng ta. Chúng ta có thể tạo kiểu cho nó để chứa đường viền, cạnh tròn, phông chữ, v.v.
  • lớp front – đây là mặt trước của kiểu thẻ và sẽ chứa hình nền Unsplash
  • lớp back – đây là phần sau của kiểu thẻ và sẽ chứa nút. Điều này sẽ không được hiển thị theo mặc định.

Phương pháp của chúng tôi để tạo hoạt ảnh lật này bằng CSS là khi người dùng di chuột qua front , chúng tôi sẽ xoay nó 180 độ bằng cách sử dụng
Hàm CSS xoayY . mặt sau của thẻ sẽ được xoay âm 180 độ bằng cách sử dụng chức năng xoayY .

Hàm CSS xoayY ()

Hàm CSS xoayY () là chìa khóa cho loại hoạt ảnh này. Nó là một hàm biến đổi phần tử xung quanh trục Y mà không
làm biến dạng nó. Hàm chấp nhận một góc và có thể là các kiểu dữ liệu:

  • độ
  • radian
  • học sinh tốt nghiệp
  • lượt

Trong trường hợp của chúng tôi, chúng tôi sử dụng 180 độ (180deg)

Ví dụ 2 – lật thẻ dọc

Tương tự như ví dụ trên, chúng ta có thể tạo hiệu ứng thẻ lật dọc. Từ góc độ trải nghiệm người dùng, điều này phù hợp khi trang
yêu cầu nhiều thao tác cuộn theo chiều dọc.

HTML của chúng tôi sẽ có cấu trúc giống như ví dụ trên:

  

& lt;

div

class

=

" thẻ lật dọc "

& gt;

& lt;

div

class

= < / p>

"front"

style

=

"background-image: url (https://images.pexels.com / ảnh / 38136 / pexels-photo-38136.

jpeg? w = 1260 & amp; h = 750 & amp; dpr = 2 & amp; auto = nén & amp; cs = tinysrgb) "

& gt; < / p>

& lt;

h1

class

= < / p>

"text-shadow"

& gt;

Thẻ Một

& lt; /

xin chào

& gt;

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"quay lại"

& gt;

& lt;

h2

& gt;

Tiêu đề

& lt; /

h2

& gt;

& lt;

p

& gt;

Nhà cung cấp consectetur natus voluptatem quis tenetur sed beatae eius sint.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

Và kiểu dáng cho mỗi thẻ sẽ có CSS ​​sau:

  

.

thẻ

{

vị trí

:

tương đối

;

display

:

inline-block

;

margin-right

:

2

px

;

margin-bottom

:

1

em

;

width

:

400

px

;

& gt; .front,

& gt; .back

{

display

:

block

;

color

:

trắng

;

width

:

inherit

;

background-size

:

cover

! quan trọng

;

background-position

:

center

! quan trọng

;

height

:

220

px

;

padding

:

1

em

2

em

;

background

:

# 313131

; < / p>

border-radius

:

10

px

;

p

{

font-size

:

0,9125

rem

;

line-height

:

160

%

;

color

:

# 999

; < / p>

}

}

}

Hàm CSS xoayX ()

Như với ví dụ 1, chúng tôi sử dụng chức năng CSS xoay dọc – xoayX () .

Hàm CSS xoayX () là chìa khóa cho loại hoạt ảnh này. Nó là một chức năng biến đổi phần tử xung quanh trục X mà không
làm biến dạng nó. Hàm chấp nhận một góc và có thể là các kiểu dữ liệu:

  • độ
  • radian
  • học sinh tốt nghiệp
  • lượt

Trong trường hợp của chúng tôi, chúng tôi sử dụng 180 độ (180deg). Như chúng ta có thể thấy bên dưới, khi người dùng : di chuột qua phần tử thẻ, chúng tôi xoay nó theo chiều dọc 180
độ.

  

.

thẻ

{

...

...

& amp; .flip-vertical

{

& gt; .back

{

biến đổi

:

xoayX

(

- 180

deg

);

}

& amp;

:

di chuột

{< / p>

& gt; .front

{

biến đổi

:

xoayX

(

180

deg

);

}

& gt;

.

quay lại

{< / p>

biến đổi

:

xoayX

(

0

deg

);

}

}

}

Ví dụ 3 – hoạt ảnh lật khối lập phương theo chiều dọc

Chúng tôi có thể sử dụng hoạt ảnh CSS @keyframe để tạo hoạt ảnh lật hình khối dọc như bên dưới. Loại hoạt ảnh này có thể hữu ích để hiển thị các nút hoặc
thẻ. Bạn nên sử dụng một cách tiết kiệm vì việc sử dụng quá nhiều hoạt ảnh có thể khiến người dùng mất phương hướng hoặc khó chịu.

Khi người dùng di chuột qua khối lập phương, nó sẽ xoay theo chiều dọc lên mặt trên của nó.

Xem Bút
nút lật
bởi ⭐ Kentaro ⭐ ( @kentaro_au )
trên CodePen .

Để tạo hiệu ứng này, chúng tôi sử dụng HTML

sau

  

& lt;

div

class

=

'cube'

& gt;

& lt;

div

class

= < / p>

'flip'

& gt;

& lt;

p

& gt;

Mặt trước

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt;

div

class

= < / p>

'thất bại'

& gt;

& lt;

p

& gt;

Dưới cùng

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

Giải thích về hoạt ảnh

Chúng tôi có ba lớp CSS sẽ là chìa khóa cho hoạt ảnh này:

  • cube – đây là lớp vùng chứa chính. Hoạt ảnh sẽ bắt đầu khi người dùng : di chuột qua qua phần tử này.
  • front – đây là mặt trước của khối lập phương. Điều này sẽ xuất hiện trên trục Z
  • back – đây là mặt sau của khối lập phương. Chúng tôi sẽ biến đổi nó 90 độ trên trục X và 50 pixel trên trục Z

Vì vậy, CSS sẽ như sau.

  

.

lật

{

- webkit-

biến đổi

:

translateZ

(

50

px

);

biến đổi

:

translateZ

(

50

px

);

}

.

thất bại

{

- webkit-

biến đổi

:

xoayX

(

- 90

deg

)

translateZ

(

- 50

px

);

biến đổi

:

xoayX

(

- 90

deg

)

translateZ

(

- 50

px

);

}

Bài học quan trọng từ hoạt ảnh này là chúng tôi bao gồm trục Z bằng cách sử dụng translateZ .

Hàm CSS translateZ () chỉ
đổi vị trí của phần tử trên trục Z. Điều này có nghĩa là chúng tôi có thể định vị nó gần hơn hoặc xa hơn trên không gian 3D.

Vì vậy, trong trường hợp của chúng tôi, khối lập phương của chúng tôi sẽ có mặt .flip gần với người dùng hơn và cạnh .flop để xa người dùng hơn và
xoay 90 độ theo phương thẳng đứng. Về cơ bản, chúng tôi đang ẩn bên .flop cho đến khi người dùng di chuột qua khối.

  

/ * xoay * /

.

khối lập phương

:

di chuột

{

- webkit-

biến đổi

:

xoayX

(

89

deg

);

biến đổi

:

xoayX

(

89

deg

);

}

Ví dụ 4 – hoạt ảnh khối lập phương lật ngang

Tương tự như ví dụ 3, chúng ta có thể tạo hoạt ảnh lật khối lập phương có phối cảnh ngang so với phối cảnh dọc như trên.

Khi người dùng di chuột qua khối lập phương, nó sẽ xoay theo chiều ngang sang một trong các mặt của nó ở bên cạnh.

Như với ví dụ 3, thay vì sử dụng hàm CSS xoayX () , chúng tôi sử dụng hàm xoayY () .

Ví dụ 5 – tải hoạt ảnh lật

Trong ví dụ cuối cùng, chúng ta có thể sử dụng hoạt ảnh CSS để tạo hoạt ảnh tải sau với 4 hình vuông làm chao đảo các lần lật.

Xem Bút
Cube Flipping Loader
của ⭐ Kentaro ⭐ ( @kentaro_au )
trên CodePen .

Suy nghĩ cuối cùng

Chúng ta đã xem qua năm ví dụ về cách thực hiện hoạt ảnh lật bằng CSS. Hoạt ảnh lật có thể hữu ích cho thẻ xem trước blog hoặc thiết kế web thư viện.

Chúng mang lại cho người dùng những tương tác thú vị và giúp họ ở lại trang web của bạn.

Hoạt ảnh lật sẽ yêu cầu bạn sử dụng hoạt ảnh CSS @keyframe
và sự kết hợp của các hàm CSS xoayX , xoayY translateZ .

  • Các hàm CSS xoayX xoay phần tử trên trục X – tức là theo chiều dọc

  • Các hàm CSS xoay Y xoay phần tử trên trục Y – nằm ngang

  • Dịch chuyển CSS funtions thay đổi khoảng cách của phần tử trên không gian 3D – các giá trị cao hơn xuất hiện gần hơn và các giá trị thấp hơn ở xa hơn.

Sử dụng kết hợp ba thuộc tính, chúng tôi có thể tạo ra các tương tác lật thú vị.


Xem thêm những thông tin liên quan đến chủ đề hoạt ảnh css xoay 180 độ

Pure CSS 3D Sphere Animation-CSS Animation Effect

  • Tác giả: Shamiur Rahman
  • Ngày đăng: 2021-07-11
  • Đánh giá: 4 ⭐ ( 6988 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Pure CSS 3D Sphere Animation-CSS Animation Effect

Cách tạo 8 Spinners tải CSS

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 6643 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta đều biết rằng CSS3 mang lại rất nhiều tính năng cho phép bạn làm rất nhiều thứ hay ho mà chúng ta từng cần Javascript. Một trong những tính năng mà chúng ta sẽ xem xét ngày hôm nay…

Hình ảnh động CSS: hướng dẫn giải thích về cách tạo hình ảnh động

  • Tác giả: creativosonline.org
  • Đánh giá: 4 ⭐ ( 2828 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã bao giờ nghĩ lại các tùy chọn bạn có trong CSS chưa? Trong bài đăng này, chúng tôi giới thiệu cho bạn một thế giới mới và dạy bạn cách tạo hoạt ảnh.

Làm thế nào để lật hình nền bằng CSS?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 5005 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể lật nó theo chiều ngang với CSS … a:visited { -moz-transform: scaleX(-1); -o-transform:…

Cách xoay liên tục hình ảnh bằng CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 8019 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Ví dụ về hoạt ảnh CSS: hoạt ảnh tốt nhất cho video

  • Tác giả: www.creativosonline.org
  • Đánh giá: 5 ⭐ ( 4518 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong CSS, bạn có thể tạo các hình ảnh động vô tận. Trong bài đăng này, chúng tôi chỉ cho bạn một số ví dụ về một số hoạt ảnh CSS tốt nhất.

Hiệu ứng hình ảnh xoay 180 độ khi hover chuột qua.

  • Tác giả: vxf.vn
  • Đánh giá: 5 ⭐ ( 1901 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các bác ai biết về hiệu ứng này khi hover chuột qua ảnh thì chỉ giúp em với.
    Đây là một bài tập quan trọng trong môn lập trình web phía client em đang…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Stateful and Stateless LSTM for Time Series Forecasting with Python - stateful