css 图像线性变换_使用CSS变换翻转图像

css 图像线性变换

Reversing the orientation of images is very easy with CSS, if somewhat counter-intuitive for those not mathematically inclined: to flip an image, you use a value of -1 with the CSS transform properties scaleX or scaleY, depending on whether you wish to flip the element horizontally or vertically.

使用CSS反转图像的方向非常容易，如果对于那些数学上不喜欢的人来说有点违反直觉的话：要翻转图像，请使用值为-1的CSS转换属性scaleX或scaleY ，具体取决于您是否希望翻转元素水平或垂直。

Why is this useful? Well, think of the number of times you’ve loaded an image into a web page only to discover that it’s aligned in the wrong direction: for example, the subject of a photo is gazing out of the frame when you want their eyes directed inwards. It’s also true that some images look more attractive in one orientation than the reverse: the flipped image of Abraham Lincoln at the top of this article being a good example. The image on the left is the way we see and know The Great Emancipator; the image on the right is how Lincoln saw himself in the mirror. Sometimes images just look better in one orientation than the other.

为什么这有用？ 好吧，想想您将图像加载到网页中而发现其方向错误的次数：例如，当您希望他们的眼睛向内看时，照片的对象正凝视于画面之外。 确实，某些图像在一个方向上看起来比在相反方向上更具吸引力：本文顶部的亚伯拉罕·林肯的翻转图像就是一个很好的例子。 左图是我们看到和认识《伟大的解放者》的方式； 右图是林肯如何照镜子。 有时图像在一个方向上看起来比其他方向更好。

The traditional solution to having an image in the wrong direction in a web page is to take the picture back into PhotoShop, flip it, re-export it, and re-upload it to the website. Applying CSS to modify the rendering of an image without altering the original is much more efficient.

在网页上以错误的方向显示图像的传统解决方案是将图片重新放回PhotoShop ，翻转，重新导出，然后重新上传到网站。 应用CSS来修改图像的渲染而不更改原始图像会更加有效。

Let’s take the Victorian-style pointing hands on the banner in my recent “Scroll To Top Then Fixed” article as an example. The hands either side of the banner text are exactly the same, just mirror-images of each other, and any request for an extra file slows down our page. So rather than bringing two separate images onto the page, I’ll call in the same image twice, but apply an extra class to the second:

让我们以我最近的“ 滚动到顶部然后固定 ”文章中的维多利亚风格的手指在横幅上为例。 标语文字两边的手完全相同，只是彼此的镜像，任何要求额外文件的请求都会减慢我们的页面速度。 因此，与将两个单独的图像放到页面上不同，我将在同一图像中调用两次，但对第二个图像应用一个额外的类：

<img src="hand.png" alt class="hand">Fabulous Floating Banner
<img src="hand.png" alt class="hand righthand">

The hand class will contain the shared rules for the appearance of both uses of the image, with the exception of float:

hand类将包含图像的两种用法的外观共享规则，但float除外：

img.hand {
	width:106px;
	height: 41px;
	vertical-align: middle;
	float: left;
}

The righthand class will switch the orientation of the image, and change its float:

righthand类将切换图像的方向，并更改其浮动值：

img.righthand {
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	float: none;
}

(Note that the code does not use vendor prefixes; also note the Microsoft-proprietary CSS selectors at the end of the declaration.)

(请注意，该代码不使用供应商前缀；还请注意声明末尾的Microsoft专有CSS选择器。)

Now the page only loads the one image, and alters it to what is needed for the right hand version: one of the principles of using CSS technologies to filter and alter existing elements to create new variations of content, avoiding unnecessary duplication and speeding up development. This also has the advantage that if I alter the original pointing hand image, I don’t need to worry about duplicating any changes for the copy on the other side: the CSS will do that for me.

现在，页面仅加载一张图像，并将其更改为右侧版本所需的图像：这是使用CSS技术过滤和更改现有元素以创建新内容变体的原则之一，避免了不必要的重复并加快了开发速度。 这样做还有一个好处，就是如果我改变了原始的指向手形图像，则不必担心在另一侧复制副本的任何更改：CSS会为我做这件事。

To understand the use of

-1 in the property value: imagine the left hand being scaled down to an infinitesimal point (scale 0). When it passes 0, the image reverses and begins to grow again. So transform: scaleY(-2) would be vertically flipped, and twice as large as the original.

-1的方法：设想将左手缩小到无穷小点(小数位数为0)。 当它超过0时，图像反转并再次开始增长。 因此， transform: scaleY(-2)将被垂直翻转，并且是原始对象的两倍。

While this technique will be most commonly applied to images, the same method could be used on any HTML content… for obvious reasons, I wouldn’t recommend that you mirror-reflect paragraph text.

尽管此技术最常用于图像，但相同的方法也可以用于任何HTML内容……出于显而易见的原因，我不建议您镜射段落文本。

翻译自: https://thenewcode.com/483/Flipping-Images-With-CSS-Transforms

css 图像线性变换