折纸 css_折纸：CSS 3D折叠图像库

折纸 css

Space on web pages is growing tighter as mobile development gains in popularity. In response, designers are being pushed to create interfaces that work in extremely restricted areas. Carousels and slider galleries are a possible solution for responsive images, but lately I’ve been interested in more elegant designs that flower open from a small footprint to expose more content. Thus, the first version of this interface, Origami.

随着移动开发的普及，网页上的空间越来越紧。 作为回应，设计师被迫创建在极端受限区域工作的界面。 轮播和滑块画廊可能是响应式图像的解决方案，但最近我一直对更优雅的设计感兴趣，这些设计从很小的空间就可以绽放出来，以展示更多的内容。 因此，此接口的第一个版本是Origami。

HTML代码 (The HTML Code)

<div id="emma">
	<img src="emma-center.jpg" alt>
	<img id="top" src="emma-top.jpg" alt>
	<img id="left" src="emma-left.jpg" alt>
	<img id="bottom" src="emma-bottom.jpg" alt>
	<img id="right" src="emma-right.jpg" alt>
</div>

The source order of the bitmap images corresponds to their level in the folded origami structure, and thus the order in which they are unfolded: the last image will fold out first, followed by the second to last, and so on. The first child image inside the <div>, emma-center.jpg, will not move at all.

位图图像的源顺序与其折叠后的折纸结构中的层级相对应，因此也与它们展开的顺序相对应： 最后一个图像将首先折叠，然后倒数第二个，依此类推。 <div>的第一个子图像emma-center.jpg完全不会移动。

设置CSS (The Setup CSS)

The bitmap images are all the same size, but for the sake of simplicity #top and #bottom have been inverted in PhotoShop^*. The next step is to set up the container element for responsive CSS 3D effects. (Note that I’ve dropped browser vendor prefixes where possible to keep the code simple and clear).

位图图像的大小均相同，但为简单起见，在PhotoShop ^* #bottom #top和#bottom颠倒了。 下一步是为响应CSS 3D效果设置容器元素。 (请注意，为了使代码简洁明了，我删除了浏览器供应商前缀 )。

div#emma {
	width: 25%;
	position: relative;
	perspective: 1500px;
	margin: 0 auto;
}

The centred container will scale in response to the size of its parent element; perspective has been set to a moderate amount. Now for the images themselves:

居中的容器将根据其父元素的大小缩放。 perspective已设置为中等水平。 现在对于图像本身：

div#emma img {
	position: absolute;
	max-width: 100%;
	-webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.6));
	filter: url(shadow.svg#drop-shadow);
	filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.6)); 
	transform: rotate3d(0, 0, 0, 0deg);
	transition-duration: 1s;
}

The images use the standard “absolutely positioned elements inside a relative container” trick for controlling layout. Any image transition will last for exactly one second. The images also have a dynamic drop-shadow applied for Chrome, Safari and Firefox: unlike a standard box-shadow, these will accurately reflect any 3D manipulation of our images, casting dynamic shadows on the surface of the page.

图像使用标准的“在相对容器内绝对定位的元素”技巧来控制布局。 任何图像过渡都会持续一秒钟。 这些图像还具有适用于Chrome，Safari和Firefox的动态阴影 ：与标准的box-shadow ，它们可以准确地反映我们图像的任何3D操作，在页面表面上投射动态阴影。

3D矩阵快捷方式 (The rotate3D Matrix Shortcut)

The rotate3d  property is a useful shortcut for 3d manipulation: the value at the end of the declaration will be shared by the X, Y and Z axes during rotation of the element, depending on the value of their multiplier. A value of 1 for an axis means that the full value of the rotation will be used; 0.5 will be half the rotation amount, and so on.

rotate3d属性是3d操作的有用快捷方式：声明的末尾值将在元素旋转期间由X，Y和Z轴共享，具体取决于其乘数的值。 轴的值为1表示将使用旋转的完整值； 0.5将是旋转量的一半，依此类推。

避免WebKit偏向于过早过渡 (Avoiding WebKit’s Predilection For Premature Transitions)

One of the issues found in crafting CSS animations for Webkit is that it has a tendency to immediately transition elements from an assumed default state to the initial transition point on page load, especially if the transition property is set to all. By using position: absolute and zeroing out all values of rotate3d, we’ve avoided this particular behaviour in Chrome and Safari.

为Webkit制作CSS动画时发现的问题之一是，它倾向于在页面加载时立即将元素从假定的默认状态转换到初始转换点，特别是如果transition属性设置为all 。 通过使用position: absolute和将rotate3d所有值rotate3d ，我们避免了Chrome和Safari中的这种特殊行为。

创造展开效果 (Creating An Unfolding Effect)

The images unfold whenever the user hovers over the div container. Taking a close look at the first image reveals the key to the technique:

每当用户将鼠标悬停在div容器上时，图像就会展开。 仔细观察第一张图片可以发现该技术的关键：

div#emma img#right {
	transform-origin: top right;
	transition-delay: 3s;
}
div#emma:hover img#right {
	transform: rotate3d(0, 1, 0, 180deg);
	transition-delay: 0s;
}

Any transformation of the first image will originate in the top right corner of the image, where the paper logically “folds”. The image will unfold over 180 degrees in the Y axis the moment that the user interacts with the element.

第一张图像的任何变换都将始于图像的右上角，纸张在逻辑上会“折叠”。 用户与元素进行交互时，图像将在Y轴上展开180度。

So far, that’s standard behaviour for simple 3D transforms. However if we leave the code as-is, the images will fold back in the exact same order that they opened, which we don’t want: in order to make sense, the image that unfolded first should transition back last when the user leaves the <div>.

到目前为止，这是简单3D转换的标准行为。 但是，如果我们按原样保留代码， 则图像将按照打开时的完全相同的顺序向后折叠，这是我们不希望的：为了有意义， 首先展开的图像应在用户离开时最后向后过渡<div> 。

To create that behaviour, I’ve added a delay to the default state of the image. Remember that a transition-delay is always tothe next state. That can be a little confusing at first:

为了创建这种行为，我为图像的默认状态添加了一个延迟 。 请记住，一个transition-delay总是到下一个状态。 刚开始时可能会有些混乱：

Motion	Delay before movement	Duration
Unfolding (default state → hover state)	None (derived from the value on the :hover state)	1 sec
Refolding (hover state → default state)	3 seconds (derived from the value on the default state)	1 sec

运动	移动前延迟	持续时间
展开(默认状态→悬停状态)	无(源自：hover状态的值)	1秒
重新折叠(悬停状态→默认状态)	3秒(从默认状态的值得出)	1秒

The rest of the CSS follows suit, with transition-delay increasing for the hover state of images higher in the stack (so they unfold in sequence) and decreasing for their default states (so that they return in reverse order).

CSS的其余部分也一样， transition-delay 随着堆栈中较高图像的悬停状态而增加(因此它们依次展开)， 而对于其默认状态则减小 (以便它们以相反的顺序返回)。

div#emma img#bottom {
	transform-origin: center bottom;
	transition-delay: 2.5s;
}
div#emma:hover img#bottom {
	transform: rotate3d(1, 0, 0, -178deg);
	transition-delay: .5s;
}
div#emma img#left {
	transform-origin: left top;
	transition-delay: 2s;
}
div#emma:hover img#left {
	transform: rotate3d(0, 1, 0, -178deg);
	transition-delay: 1s;
}
div#emma img#top {
	transform-origin: top center;
	transition-delay: 1.5s;
}
div#emma:hover img#top {
	transform: rotate3d(1, 0, 0, 179deg);
	transition-delay: 1.5s;
}

I’ve used values less than ±180° for some of the transforms due to the fact that browsers will sometimes become confused as to whether elements should rotate clockwise or counter-clockwise from 0 to 180 degrees; by providing values slightly less than 180 we can “lead” the browser in the correct direction, while keeping the complete unfolded interface less than perfectly “flat”.

由于某些浏览器有时会混淆元素是应顺时针还是逆时针从0旋转到180度，因此我对某些转换使用的值小于±180°。 通过提供略小于180的值，我们可以按正确的方向“引导”浏览器，同时保持完整的展开界面不完全“平坦”。

结论与未来改进 (Conclusions & Future Improvements)

CSS 3D transforms allow us to use perspective to get around the limits of shrinking screen sizes on web pages, revealing more content in depth.

CSS 3D转换使我们能够使用透视图来避免缩小网页上的屏幕尺寸的局限性，从而深入揭示更多内容。

The code shown here is still less than perfect; mobile devices will read the first tap on the div as a hover event and unfold the images, but not return them into place: that code will be saved for a future article. I’ve also not added a fallback for browsers that do not yet support CSS transforms.

这里显示的代码仍然不够完美。 移动设备将在鼠标悬停事件时读取div上的第一个水龙头，并展开图像，但不会将它们放回原处：该代码将被保存以备将来使用。 对于尚未支持CSS转换的浏览器，我也没有添加后备功能。

Ideally, the Origami effect would be double-sided: one might expect to see a paper texture behind each image, with unfolding revealing the photograph on the other side. That rather more complex proposition I will also leave for a future article.

理想情况下，折纸效果应该是双面的：人们可能希望在每张图像的后面都看到一种纸张纹理，并且展开后将照片的另一面露出来。 这个相当复杂的主张我也将留待以后发表。

翻译自: https://thenewcode.com/671/Origami-A-CSS-3D-Foldout-Image-Gallery

折纸 css