Hướng dẫn flip background image css - lật ảnh nền css

Lật là vòng quay của một cái gì đó theo hướng ngang và dọc. Ở đây, hình ảnh lật được định nghĩa là một hình ảnh quay theo hướng ngang hoặc dọc. Khi hình ảnh của chúng tôi quay trên một trục dọc hoặc ngang, chúng tôi có thể nói rằng hình ảnh này lật theo chiều dọc hoặc chiều ngang. Chúng ta có thể biến hình ảnh của chúng ta thành một hình ảnh lật bằng cách sử dụng một số thuộc tính của CSS. Chúng ta có thể làm cho hình ảnh của chúng ta lật khi chúng ta di chuột qua hình ảnh trong CSS. Khi con trỏ di chuyển qua hình ảnh, hình ảnh lật theo hướng thẳng đứng hoặc hướng ngang hoặc cả hai hướng.

Trong hướng dẫn này, chúng tôi sẽ thực hiện tất cả các kỹ thuật lật này bằng cách sử dụng các thuộc tính CSS. Ở đây, chúng ta sẽ tìm hiểu về việc lật hình ảnh trong CSS bằng các thuộc tính khác nhau.

Ví dụ 1:

Để lật hình ảnh trong CSS, chúng ta phải có mã HTML nơi chúng ta thêm hình ảnh. Sau đó, chúng tôi tạo một tệp CSS để áp dụng các thuộc tính để hình ảnh của chúng tôi lật. Chúng ta có thể lật hình ảnh của chúng ta theo bất kỳ hướng nào của sự lựa chọn của chúng ta. Chúng tôi có mã Visual Studio nơi chúng tôi phải thực hiện các ví dụ này. Vì vậy, chúng tôi mở tệp và chọn ngôn ngữ là HT HTML và tạo tệp HTML này. Sau đó, chúng ta phải thực hiện một số mã ở đây được đưa ra trong hình ảnh sau. Khi chúng tôi hoàn thành mã này, chúng tôi phải lưu nó.

Để hiển thị tiêu đề trên đầu trang, chúng tôi sẽ thêm thẻ trên mạng. Sau đó, chúng tôi có một đoạn văn, và đoạn này được hiển thị bên cạnh tiêu đề. Sau này, chúng tôi thực hiện mã chính là thêm mã hình ảnh. Chúng tôi thêm hình ảnh sau tiêu đề và đoạn văn. Chúng tôi sử dụng thẻ của người Viking và trong SRC của nó. Chúng tôi đưa ra đường dẫn hoặc tên của hình ảnh mà chúng tôi muốn thêm. Chúng tôi đặt giá trị chiều rộng của nó thành 400 400 và giá trị chiều cao của nó thành 300 300. Chúng tôi cũng đặt chiều rộng và chiều cao này trong tệp CSS của chúng tôi. Bây giờ, chúng tôi di chuyển để tạo tệp CSS của chúng tôi trong đó chúng tôi sử dụng các thuộc tính khác nhau để biến hình ảnh của chúng tôi thành một hình ảnh lật.

Chúng tôi sử dụng bộ chọn hình ảnh của Hover Hover. Nó được sử dụng để chọn hình ảnh khi con trỏ di chuyển qua hình ảnh. Transform-biến đổi của Webkit là thuộc tính CSS được sử dụng để biến hình ảnh thành 2-D và 3-D. Chúng ta có thể xoay hình ảnh của chúng ta bằng cách sử dụng điều này. Các quy mô của người Viking được sử dụng để xoay hình ảnh theo hướng ngang. Mã này sẽ xoay hình ảnh theo chiều ngang khi chúng ta di chuyển con trỏ qua hình ảnh này.

Đây là hình ảnh gốc trước khi di chuyển con trỏ qua hình ảnh. Khi chúng ta di chuột qua hình ảnh này, nó quay theo hướng ngang.

Hình ảnh xoay cũng được hiển thị sau:

Ở đây, bạn có thể thấy rằng hình ảnh xoay theo chiều ngang. Hình ảnh trước là hình ảnh quay sau khi di chuyển con trỏ qua hình ảnh.

Ví dụ #2:

Đây là tệp HTML. Bạn có thể thấy rằng chúng tôi đã thêm một hình ảnh ở đây trong mã này. Chúng tôi đã sử dụng hình ảnh của House House.png trong ví dụ này.

Chúng tôi đặt hình ảnh trên chiều rộng của Width thành 500px và hình ảnh chiều cao trên mạng thành 400px. Sau đó, chúng tôi có một hình ảnh trên mạng di chuột, trong đó có biến đổi hình ảnh trên trục ngang khi con trỏ lơ lửng trên hình ảnh này.

Output:

Hình ảnh trước là hình ảnh gốc trước khi chuyển đổi trên trục ngang. Hình ảnh sau đây là hình ảnh sau khi chuyển đổi khi chúng ta di chuyển con trỏ qua hình ảnh. Bạn có thể dễ dàng thấy sự khác biệt giữa hình ảnh trước và hình ảnh đã cho sau.

Ví dụ #3:

Ở đây, các giá trị chiều rộng của Width Width và các giá trị chiều cao của Wikipedia là như nhau và hình ảnh là như nhau. Nhưng chúng tôi xoay hình ảnh theo chiều dọc sau khi di chuột qua hình ảnh. Vì vậy, chúng tôi sử dụng biến đổi của người Viking và đặt nó thành quy mô (-1), vì vậy nó sẽ xoay hình ảnh của chúng tôi theo hướng thẳng đứng.

Bây giờ, hãy xem hình ảnh quay theo hướng thẳng đứng khi chúng ta di chuột qua hình ảnh này. Ở đây, hình ảnh được hiển thị theo hướng lộn ngược, xoay theo chiều dọc sau khi di chuột qua điều này.

Ví dụ #4:

Trong mã này, chúng tôi sử dụng hai giá trị trong quy mô trực tuyến. Chúng tôi sử dụng biến đổi của người Viking. Trong quy mô của nó, chúng tôi vượt qua hai giá trị, -1, -1, xoay hình ảnh theo hướng dọc và ngang. Khi chúng ta di chuyển chuột trên hình ảnh này, nó quay theo cả hai hướng.

Thấy rằng hình ảnh được xoay cả trên trục dọc và ngang khi chúng ta di chuột qua nó. Hình ảnh trước là hình ảnh sau khi di chuột qua hình ảnh gốc.

Ví dụ #5:

Ví dụ này khác với các ví dụ trước. Chúng tôi tạo các lớp Div khác nhau bằng cách sử dụng các tên khác nhau. Lớp DIV đầu tiên được đặt tên là Flip Flip-Box. Lớp DIV thứ hai được đặt tên là Box Flip-Box-Inner. Và lớp Div thứ ba được đặt tên là Flip Flip-Box-Front. Sau khi xác định tất cả các lớp Div này, chúng tôi đặt một hình ảnh có tên là MyImage.jpeg. Sau đó, chúng tôi tạo ra một div div khác với một tên lật box-back-back. Bây giờ, chúng tôi viết một số đoạn trong div này. Chúng tôi sử dụng tất cả các lớp Div này trong tệp CSS của chúng tôi.

Chúng tôi sử dụng cơ thể của người Viking và các gia đình của Font Font để đến Arial Arial. Sau đó, chúng tôi đặt hộp chứa của hộp lật, có chiều rộng và chiều cao thành 600px và và 400px, tương ứng. Bây giờ, chúng tôi thêm đường viền của đường viền và đặt nó thành 1PX, theo chiều rộng của nó với một loại rắn chắc chắn để chúng tôi có thể cho thấy rằng khi hình ảnh này lật, nó sẽ ra khỏi hộp khi chúng tôi di chuyển con trỏ qua nó. Chúng tôi thêm phối cảnh của người Viking và đặt nó thành 1000px. Chúng tôi sử dụng nó khi chúng tôi phải thêm một số hiệu ứng ba chiều cho hình ảnh.

Bây giờ, chúng tôi có một container khác là một hộp đựng box-box. Container này đặt vị trí của mặt trước và mặt sau của hình ảnh. Chúng tôi đặt vị trí của người Viking thành những người thân của người Hồi giáo, và chiều rộng và chiều cao của người khác. Chúng tôi sử dụng thuộc tính chuyển đổi trên mạng để điều khiển tốc độ hoạt hình và đặt nó thành các loại 0,8.

Sau này, chúng tôi sử dụng kiểu biến đổi kiểu máy tính để hiển thị hình ảnh trong không gian ba chiều. Chúng tôi đặt nó thành bảo tồn của người bảo tồn-3D. Sau đó, chúng tôi có một chiếc máy bay lượn trên hộp lật, vì vậy, khi chúng tôi di chuột qua hình ảnh, nó sẽ di chuyển theo hướng ngang vì chúng tôi sử dụng biến đổi trên mạng để quay vòng và đặt nó thành 180deg. Chúng tôi có phần mềm lật trên hộp và các hộp lật. Sau đó, chúng tôi đưa ra vị trí cho cả hai ở đây. Chúng tôi đặt vị trí của người Viking cho cả hai thành công. Chiều cao của người khác và chiều rộng của người Viking, cho cả hai container được đặt thành 100px 100px và 100px, tương ứng. Chúng tôi cũng đã thiết lập khả năng của WebKit-Backface-visgiality thành các trò chơi ẩn. Thuộc tính này được sử dụng khi chúng tôi xoay hình ảnh và đặt nó ở đây xem người dùng có nhìn thấy mặt sau của hình ảnh hay không.

Vì vậy, ở đây, chúng tôi che giấu nó bằng cách sử dụng thẻ ẩn ẩn với thuộc tính này. Bây giờ, chúng tôi tạo kiểu cho mặt trước bằng cách sử dụng một thùng chứa flip-box. Chúng tôi đã đặt các màu nền màu của người Viking thành #BBB, và màu sắc của phông chữ hoặc văn bản thành màu đen. Cuối cùng, chúng tôi tạo kiểu cho mặt sau của hình ảnh bằng cách sử dụng hộp lật-box-back. Màu nền của nó được thiết lập thành màu xám, và phông chữ màu, được đặt thành màu trắng. Chúng tôi sử dụng thuộc tính của Transform Transform và đặt giá trị của nó thành Xoay Rotatey (180Deg).

Trong đầu ra, chúng tôi có nhiều hình ảnh trong đó bạn có thể nhận thấy vòng quay của hình ảnh. Trong hình ảnh cuối cùng, mặt sau của hình ảnh cũng được hiển thị ở đây. Bạn có thể thấy cách nó quay khi chúng ta di chuột qua hình ảnh này. Tất cả các văn bản mà chúng tôi đã viết trong mã HTML sẽ xuất hiện ở mặt sau của hình ảnh khi hình ảnh này xoay sau khi di chuột.

Sự kết luận

Trong hướng dẫn này, chúng tôi đã sử dụng khái niệm lật hình ảnh trong CSS. Chúng tôi đã thực hiện các ví dụ giao nhau khác nhau ở đây. Chúng tôi lật hình ảnh của chúng tôi theo hướng thẳng đứng hoặc hướng ngang hoặc theo cả hai hướng sau khi lơ lửng. Chúng tôi cũng đã thực hiện một ví dụ trong đó chúng tôi xoay hình ảnh của mình ở 180 độ khi chúng tôi di chuột qua hình ảnh. Chúng tôi đã sử dụng các thuộc tính CSS trong tất cả các ví dụ và hiển thị tất cả các đầu ra trong hướng dẫn này. Bạn sẽ thấy cách hình ảnh lật hoặc xoay theo chiều dọc và chiều ngang.