Nhận mã nguồn của hiệu ứng lật CSS khi di chuột. Là bài viết giúp bạn tạo hiệu ứng lật 3D hay xoay CSS phù hợp khi di chuột.

Bạn đang xem : css khi xoay di chuột

Hiệu ứng lật CSS khi di chuột | Hiệu ứng lật 3D với HTML & amp; CSS: Bạn đã thấy nhiều hiệu ứng CSS 3D lật trên nhiều trang web. Chủ yếu họ sử dụng hiệu ứng này trên Danh mục đầu tư & amp; Phần thành viên trong nhóm. Đầu tiên, bạn sẽ thấy một hình ảnh & amp; khi bạn di chuột qua nó, hình ảnh sẽ chuyển sang và cung cấp thông tin về nó. Và việc chuyển đổi chi tiết hình ảnh thành văn bản trông giống như hiệu ứng 3D.

Bạn không có bất kỳ ý tưởng nào về những gì bạn có thể làm với HTML & amp; CSS. Mọi người nghĩ rằng đây là những kiến ​​thức cơ bản về phát triển web . Nói cách khác, họ nghĩ HTML & amp; CSS rất dễ dàng. Có, nhưng trừ khi bạn không biết về phiên bản mới nhất của những HTML5 này & amp; Các tính năng của CSS3. Rất ít người có thể nói, tôi là một chuyên gia về HTML, CSS. Hầu hết mọi người biết về nó nhiều như họ sử dụng nó hàng ngày.

Bài viết này giúp bạn tạo hiệu ứng lật 3D khi di chuột bằng CSS. Bạn có thể tạo nó bằng lệnh biến đổi của CSS. Thuộc tính biến đổi áp dụng phép biến đổi 2D hoặc 3D cho một phần tử. Thuộc tính này cho phép bạn xoay, chia tỷ lệ, di chuyển, xiên, v.v. (tìm hiểu thêm về CSS chuyển đổi ).

3D CSS Hiệu ứng Lật trên Mã nguồn Di chuột

Hãy tạo một hộp lật 3D với CSS3. Bạn có thể tạo ra một hiệu ứng lật tuyệt vời với mã nguồn này. Trước đây, tôi đã chia sẻ hiệu ứng di chuột liên kết CSS khi tôi sử dụng trong các liên kết blog của mình. Nếu bạn muốn có thêm nội dung CSS, hãy chuyển đến Danh mục CSS của tôi. Vì vậy, hãy nói về chương trình này: Chương trình này được tạo bằng HTML, CSS & amp; Font Awesome (một họ phông chữ web). Về cơ bản, tôi sử dụng phông chữ tuyệt vời cho các biểu tượng thú vị được tích hợp sẵn. Tôi đã tạo 2 tệp cho chương trình này, một tệp cho html tệp khác cho kiểu css . Chương trình này sắp xoay bất kỳ đối tượng nào trên di chuột. Hãy cùng xem bản xem trước:

Xem Thêm  JavaScript JSON thành chuỗi - javascript phân tích cú pháp json thành chuỗi

css 3d xoay khi di chuột

Bây giờ, hãy tạo hai tệp có tên index.html (hoặc bất kỳ tên nào bạn có thể sử dụng ) & amp; một cái khác để cung cấp kiểu có tên style.css
index.html

Tạo một tệp có tên index.html và đặt những mã được cung cấp ở đây bên dưới.

index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30 < / p>

31

32

33 < / p>

& lt;

!

LOẠI TÀI LIỆU

html

& gt; < / p>

& lt;

!

bởi

webdevtrick

(

https

:

// webdevtrick.com) – & gt;

& lt;

html

lang

=

“vi”

dir

=

“ltr”

& gt;

& lt;

cái đầu

& gt; < / p>

& lt;

meta

bộ ký tự

=

” utf-8 “

& gt;

& lt;

title

& gt;

& lt;

/

title

& gt;

& lt;

liên kết

rel

=

“bảng định kiểu”

href

=

“style.css”

& gt;

& lt;

liên kết

rel

=

” bảng định kiểu “

href

=

“https://use.fontawesome.com/releases/v5.3.1/css/all.css”

& gt; < / p>

& lt;

/

head

& gt;

& lt;

body

& gt;

< / p>

& lt;

div < / p>

class

=

“card middle”

& gt;

< / p>

& lt;

div

class

< p class = "crayon-o"> =

“front”

& gt;

& lt;

img

src

=

“sample.jpg”

alt

=

“”

& gt;

< / p>

& lt;

/

div

& gt;

& lt;

div

lớp

=

“trở lại”

& gt;

& lt;

div

lớp

=

“back-content middle”

& gt;

< / p>

& lt;

h2

& gt;

WebDevTrick

& lt;

/

h2 < / p>

& gt;

& lt;

span

& gt;

Nhà thiết kế

& amp;

amp

;

Nhà phát triển

Blog

& lt;

/

span

& gt;

& lt;

div

class

=

“sm”

& gt;

& lt;

a

href

=

” # “

& gt;

& lt;

i

lớp

=

“fab fa-facebook-f”

& gt; < / p>

& lt;

/

i

< p class = "crayon-o"> & gt;

& lt;

/

a

& gt;

& lt;

a

href

=

“#”

& gt;

& lt;

i

lớp

=

“fab fa-twitter”

& gt ;

& lt;

/

i

& gt;

& lt;

/

a

& gt;

& lt;

a

href

=

” # “

& gt;

& lt;

i

lớp

= < / p>

“fab fa-youtube”

& gt;

& lt ;

/

i

& gt;

& lt;

/

a

& gt;

& lt;

a

href

=

” # ”

& gt;

& lt;

i

lớp

=

” fab fa-instagram “

& gt;

& lt;

/

i

& gt;

Xem Thêm  Khai báo biến C ++ - cách khai báo một biến trong c ++

& lt;

/

a

& gt ;

& lt;

/

div

& gt;

& lt;

/

div

& gt;

& lt;

/

div

& gt;

< / p>

& lt;

/

div

< p class = "crayon-o"> & gt;

& lt;

/

body

& gt;

& lt;

/

html

& gt;

style.css

Bây giờ, hãy tạo một tệp có tên style.css để tạo hiệu ứng cho chương trình này.

style.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

/ ** của webdevtrick (https://webdevtrick.com) ** /

*

{< / p>

margin

:

0 < / p>

;

padding

:

0

;

text

trang trí

:

không có

;

font

family

:

” montserrat “

;

}

body

{

background

:

# 333;

}

< p class = "crayon-line" id = "urvanov-cú pháp-highlighter-62b3db69b1e21140950175-11">

.

middle

{

< p class = "crayon-h">

vị trí

:

tuyệt đối

;

đầu

:

50 < / p>

%

;

trái

:

50

% < / p>

;

biến đổi

:

< / p>

dịch

(

50

%

,

50

%

) < / p>

;

}

.

thẻ

{

con trỏ

:

con trỏ

;

width

:

340px

;

height

:

480px

;

}

.

front

,

.

quay lại

{

width

: < / p>

100

%

;

height

:

100

%

;

tràn < / p>

:

ẩn

;

mặt sau

khả năng hiển thị

:

ẩn

;

vị trí

:

tuyệt đối

;

chuyển tiếp

:

biến đổi

.

6 giây

tuyến tính

;

}

.

front

img

{

height

:

< p class = "crayon-h">

100

%

;

}

.

front

{

chuyển đổi

:

phối cảnh

(

600px

)

xoayY

(

0deg

)

;

}

.

quay lại

{< / p>

background

:

# f1f1f1;

biến đổi

:

phối cảnh

(

600px

)

xoayY

(

180deg

)

;

< / p>

}

.

quay lại < / p>

nội dung

{

color

:

# 2c3e50;

văn bản

align

:

center

;

width

:

100

%

;

}

.

sm

{

margin

< p class = "crayon-o">:

20px

0

;

}

.

sm

a

{

display

:

inline

flex

;

width

:

40px

;

< p class = "crayon-line crayon-sọc-line" id = "urvanov-cú pháp-highlighter-62b3db69b1e21140950175-52">

height

:

40px

;

biện minh

nội dung

:

center

;

align

đồ

:

center

;

màu

:

# 2c3e50;

font

size

:

18px

;

chuyển tiếp

:

0,4 ​​giây

;

border

bán kính

:

50

%

}

.

sm

a

:

di chuột

{

background

:

# 2c3e50;

màu

:

< p class = "crayon-h">

trắng

;

}

.

thẻ

:

di chuột

& gt;

.

front

{

biến đổi

:

phối cảnh

(

600px

)

xoayY

(

< p class = "crayon-cn"> 180deg

)

;

}

.

thẻ

:

di chuột

& gt;

.

quay lại

{

< p class = "crayon-h">

biến đổi

:

phối cảnh

(

600px

)

xoayY

(

0deg

)

;

}

Vậy là xong. Bây giờ bạn đã tạo thành công hiệu ứng lật xoay khi di chuột. Nếu bạn có bất kỳ thắc mắc nào, hãy bình luận xuống bên dưới.

Cảm ơn bạn đã ghé thăm, hãy tiếp tục ghé thăm.

Xem Thêm  Trạng thái và Vòng đời - Phản ứng - vòng đời phản ứng là gì


Xem thêm những thông tin liên quan đến chủ đề css khi di chuột quay

#Query 33 Phần CSS hiệu ứng

alt

  • Tác giả: Nguyễn Văn Độ
  • Ngày đăng: 2021-08-23
  • Đánh giá: 4 ⭐ ( 4579 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [JQuery] Hướng Dẫn Lập Trình Jquery Chọn Bộ
    jquey html css

17 MẪU HIỆU ỨNG CSS HÀNG ĐẦU HIỆN NAY

  • Tác giả: aptech-danang.edu.vn
  • Đánh giá: 4 ⭐ ( 4723 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đã có thể nhận thấy số lượng các ví dụ hiệu ứng CSS có trên các trang web đã tăng lên gần đây. Hiệu ứng đã tạo ra một giật gân trực tuyến và được thiết lập để trở thành một trong những xu hướng thiết kế web quan trọng của năm 2018 . Tất cả trên web, các nhà thiết kế đang sáng tạo và sử dụng hoạt ảnh CSS để mang cá tính đến trang web của họ, giải thích các ý tưởng phức tạp một cách nhanh chóng và dễ dàng và hướng dẫn hành động của người dùng.

Thuộc tính Transform rotate

  • Tác giả: blog.kenhtinhoc.vn
  • Đánh giá: 3 ⭐ ( 7002 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hiệu ứng hình ảnh cuộn qua CSS – Thay đổi hình ảnh khi di chuột

  • Tác giả: doanhaiblog.com
  • Đánh giá: 5 ⭐ ( 8168 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Điều này từng được triển khai bằng JavaScript, khá dễ dàng chỉ với một lượng nhỏ tập lệnh. Để làm cho hình ảnh cuộn qua hoạt động, các thuộc tính onmouseover

Hiệu ứng rê chuột trong CSS

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 5928 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo hiệu ứng di chuột (hover) thú vị bằng CSS

  • Tác giả: niithanoi.edu.vn
  • Đánh giá: 4 ⭐ ( 9418 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thu hút khách hàng bấm vào các nút để dẫn dắt khách hàng thực hiện các mục tiêu chuyển đổi trên trang web là cực kỳ quan trọng. Hãy cùng thử xem cách tạo một hiệu ứng rê chuột (hover css) thú vị bằng css nhé.

Hover css: Xử lý thay đổi css khi di chuột vào một phần tử html

  • Tác giả: unitop.com.vn
  • Đánh giá: 4 ⭐ ( 1075 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

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

By ads_php