Hiệu ứng lật CSS khi di chuột | Hiệu ứng lật 3D với HTML & CSS – css khi di chuột quay

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:

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;

!

–

mã

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;

& 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.