Hướng dẫn flip images css - lật hình ảnh css

Question

Tìm hiểu cách lật một hình ảnh (thêm hiệu ứng gương) với CSS.

Nội dung chính Show

Cách lật hình ảnh
Hình ảnh lật 3d với văn bản
Old Vendor Prefixes
Thursday, November 13, 2014

Di chuyển chuột qua hình ảnh:

Cách lật hình ảnh

Thí dụ

img: di chuột {& nbsp; -WebKit-Transform: Scalx (-1); & nbsp; Biến đổi: ScaleX (-1);}
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

Hãy tự mình thử »

Lưu ý: Ví dụ này không hoạt động trên máy tính bảng hoặc điện thoại di động. This example does not work on tablets or mobile phones.

Mẹo: Chuyển đến hướng dẫn biến đổi CSS 3D của chúng tôi, để tìm hiểu thêm về các phép biến đổi 3D. Go to our CSS 3D Transforms Tutorial, to learn more about 3D transformations.

Hình ảnh lật 3d với văn bản

Tìm hiểu cách thực hiện một cú lật 3D hoạt hình của một hình ảnh với văn bản:

Paris

Thật là một thành phố tuyệt vời

Bước 1) Thêm HTML:

Thí dụ

img: di chuột {& nbsp; -WebKit-Transform: Scalx (-1); & nbsp; Biến đổi: ScaleX (-1);}

Paris

What an amazing city

Step 2) Add CSS:

Thí dụ

img: di chuột {& nbsp; -WebKit-Transform: Scalx (-1); & nbsp; Biến đổi: ScaleX (-1);}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

Hãy tự mình thử »
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}

Lưu ý: Ví dụ này không hoạt động trên máy tính bảng hoặc điện thoại di động.
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

Mẹo: Chuyển đến hướng dẫn biến đổi CSS 3D của chúng tôi, để tìm hiểu thêm về các phép biến đổi 3D.
.flip-box-front {
background-color: #bbb;
color: black;
}

Hình ảnh lật 3d với văn bản
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

Hãy tự mình thử »

You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.

.flip-horizontally {
  transform: scaleX(-1);
}

See how one arrow is used to point both directions here:

See the Pen Flip an Image by CSS-Tricks (@css-tricks) on CodePen.
Flip an Image by CSS-Tricks (@css-tricks)
on CodePen.

Old Vendor Prefixes

See the Pen Flip an Image by CSS-Tricks (@css-tricks) on CodePen.
Flip an Image by CSS-Tricks (@css-tricks)
on CodePen.

This is any image too, or really any element at all.

See the Pen Flip an Image by CSS-Tricks (@css-tricks) on CodePen.
Flip an Image by CSS-Tricks (@css-tricks)
on CodePen.

Old Vendor Prefixes

For posterity:

img {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);

  filter: FlipH;
  -ms-filter: "FlipH";
}

Thursday, November 13, 2014

Trong khi thiết kế web có những ảnh bạn cần dùng nhiều lần hoặc bạn download trên mạng những bước ảnh đẹp nhưng bị ngược chiều bạn ngại vào phần mềm photoshop để lật ảnh lại và lưa ảnh lần nữa. Vậy làm cách nào không mở phần mềm PS nhưng bạn vẫn có thể làm được điều đó nhanh chóng. Hôm nay mình sẽ hướng dẫn cách đảo ngược image trong css

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}