“ Card Fan” CSS Gallery显示四行代码

I found this effect used on YouTube’s Google+ page and decided to duplicate it in CSS3: if you’re familiar with CSS, and are prepared to use a little CSS3 animation, the technique is not difficult to achieve at all. (Move your mouse over the image above to see the final version).

我在YouTube的Google+页面上发现了这种效果，并决定在CSS3中复制该效果：如果您熟悉CSS并准备使用一些CSS3动画 ，则该技术一点也不难实现。 (将鼠标移到上面的图片上可以查看最终版本)。

First, the images you wish to use in the fan need to be all the same size, so that they hide each other neatly when stacked.

首先，您要在风扇中使用的图像必须具有相同的尺寸，以便它们在堆叠时可以整齐地彼此隐藏。

Once you have all of your images the same size, place them inside a single <div> the same width and height as the images; I’ve given this div an id of cardfan.

一旦所有的图像都具有相同的大小，将它们放在与图像相同的width和height的单个<div> ； 我给这个div cardfan的id 。

<div id="cardfan">
	<img src="zen.jpg" alt="Zen">
	<img src="matera-italy.jpg" alt="Matera, Italy">
	<img src="tivoli-italy.jpg" alt="Tivoli, Italy">
</div>

(The height on the div is necessary to create space underneath it, as the photos will be positioned absolutely.) You may wish to use margin: 0 auto on the div to get it to the middle of the page.

( div上的height是必要的，以便在其下创建空间，因为照片将完全定位 。)您可能希望在div上使用margin: 0 auto使其到达页面的中间。

div#cardfan {
	width: 300px;
	height: 201px;
	margin: 0 auto;
}

As all the images have the same dimension and will be given the same appearance, they can all be styled with a single descendant selector, to create a frame and drop shadow:

由于所有图像都具有相同的尺寸并具有相同的外观，因此都可以使用单个后代选择器对其进行样式设置，以创建框架和阴影：

div#cardfan img {
	width: 300px;
	height: 201px;
	border: 18px solid #ffe;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
}

Together with the width on the <div>, this puts the images in a visual column. We want to stack them, so we’ll use position: absolute to do so:

连同<div>上的width ，这会将图像放在可视列中。 我们要堆叠它们，因此我们将使用position: absolute这样做：

div#cardfan img {
	width: 300px;
	height: 201px;
	border: 18px solid #ffe;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
}

The only downside to this is that the drop shadows applied to each image add together to create a thick, dense shadow underneath. You could get around this by applying the shadow to just one image, and then adding shadows to the other images when they animate.

唯一的缺点是应用于每个图像的阴影会加在一起，从而在下方创建一个浓密的阴影。 您可以通过将阴影仅应用于一个图像，然后在其他图像进行动画处理时向其他图像添加阴影来解决此问题。

Now to get the images to move. We only want to move two of the images: the one on top of the stack, and the one at the bottom. The image in the middle will be the centre of the “fan”, and doesn’t need to be animated. We can get to the first and last images by using first-child and last-child.

现在开始移动图像。 我们只想移动两个图像：一个在堆栈顶部，一个在底部。 中间的图像将成为“风扇”的中心，并且不需要进行动画处理。 我们可以使用first-child和last-child获得第一张和最后一张图像。

We want to initiate the animation by the user moving their mouse over the <div>, so the appropriate selector is:

我们想通过用户将鼠标移到<div>启动动画，因此合适的选择器是：

div#cardfan:hover img:first-child {
	transform: rotate(12deg);
}

There’s no animation yet, just a single “jump”. Note that the image that is transformed is the one on the bottom, since it appears first in the code, and is thus the “first child” of the div.

目前还没有动画，只有一个“跳转”。 请注意，转换后的图像是底部的图像 ，因为它在代码中首先出现，因此是div的“第一个孩子”。

Let’s apply the same rotate transform, but in the opposite direction, to the last-child:

让我们对last-child应用相同的rotate变换，但方向相反：

div#cardfan:hover img:last-child {
	transform: rotate(-12deg);
}

When you move your mouse over the <div>, the first and last images will change, but they will move around their centers:

当您将鼠标移到<div> ，第一个和最后一个图像将发生变化，但它们将围绕其中心移动：

We want to change that point to be significantly below the images: think of the hands on a clock, or the hinge of a fan. We do this by giving new values to the transform-origin for our earlier declaration for all the images (again, I’ll show you just the final expected CSS spec version: you’ll have to repeat this with vendor prefixes to cover other browsers )

我们希望将该点更改为显着低于图像的位置：想想时钟上的指针或风扇的铰链。 为此，我们为所有图像的早期声明赋予了transform-origin新值(再次，我将仅向您展示最终CSS规范版本：您必须使用供应商前缀重复此操作以覆盖其他浏览器)

div#cardfan img {
	width: 300px;
	height: 201px;
	border: 18px solid #ffe;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
	transform-origin: center 600px;
}

This keeps the horizontal position of the origin point unchanged, but moves it down 600 pixels. (You may find that you’ll have to change the degree values for rotating the first and last images as a result).

这将使原点的水平位置保持不变，但会将其向下移动600像素。 (您可能会发现必须更改度值才能旋转第一张和最后一张图像)。

Finally, we need to add animation: we don’t just want a “jump”. We’ll do so by adding a transition property to the declaration above:

最后，我们需要添加动画：我们不只是想要一个“跳跃”。 我们将通过在上面的声明中添加一个transition属性来实现：

transition: all .6s linear;

Because the effect is so quick, we don’t need any easing – I’ll provide an example of a more appropriate use of ease-in and out in an upcoming article.

因为效果是如此之快，所以我们不需要任何放松–在下一篇文章中，我将提供一个示例，说明如何更方便地使用缓入和缓出 。

That’s it: an animated card fan effect in effectively four lines of CSS.

就是这样：在四行CSS中有效地制作了动画卡片迷效果。

在Chrome和Safari中平滑动画 (Smoothing Animations In Chrome and Safari)

You may see a slight “flash” or “blink” when viewing the animation in Chrome or Safari, or notice that the edges of the pictures seem a little jagged. Both issues are solved by a single trick, applied to the first and last images:

在Chrome或Safari中查看动画时，您可能会看到轻微的“闪光”或“闪烁”，或者注意到图片的边缘似乎有些锯齿。 这两个问题都可以通过一个技巧解决，并应用于第一个和最后一个图像：

-webkit-backface-visibility: hidden;

翻译自: https://thenewcode.com/425/Card-Fan-CSS-Gallery-Reveal-In-Four-Lines-of-Code