css3图片3d轮播_简单CSS 3D轮播图片库

css3图片3d轮播

The construction of this CSS 3D gallery is fairly straightforward: eight images, absolutely stacked inside a relatively positioned figure element, which in turn is placed inside a containing div.

这个CSS 3D图库的构造非常简单：八个图像，绝对堆叠在相对定位的 figure元素内，然后放置在包含div内部。

<div id="gallery">
	<figure id="spinner">
		<img src="wanaka-tree.jpg" alt>
		<img src="still-lake.jpg" alt>
		<img src="pink-milford-sound.jpg" alt>
		<img src="paradise.jpg" alt>
		<img src="morekai.jpg" alt>
		<img src="milky-blue-lagoon.jpg" alt>
		<img src="lake-tekapo.jpg" alt>
		<img src="milford-sound.jpg" alt>
	</figure>
</div>

(I’ve left the alt attribute values of the images blank for the sake of brevity).

(为简洁起见，我将图像的alt属性值留为空白)。

CSS (The CSS)

The initial CSS is also fairly simple: the z of the origin for the images and <figure> (the axis around which the elements will be transformed) is pushed “back” into the screen by 500 pixels, with the <figure> provided a transition speed of one second. The images are 40% wide, with a left of 30% positioning them in the center of the figure, making the gallery perfectly responsive.

最初的CSS也非常简单：将图像和<figure>的origin的z (元素将围绕其旋转的轴)“返回”到屏幕中500像素，而<figure>提供了transition速度为一秒。 图片的宽度为40％， left为30％，则将它们放置在figure中心，从而使图库具有完美的响应能力 。

body {
	background: #100000;
	font-size: 1.5rem;
}
div#gallery {
	perspective: 1200px;
}
figure#spinner {
	transform-style: preserve-3d;
	min-height: 122px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50% -500px;
	transition: 1s;
}
figure#spinner img {
	width: 40%;
	position: absolute;
	left: 30%;
	transform-origin-z: 50% 50% -500px;
	outline: 1px solid transparent;
}

(The min-height on the <figure> and outline on the images are provided to avoid the issues I discussed in my recent article on CSS 3D tips and tricks, while the min-width on the images ensures that the photographs do not grow so large as to overlap).

(提供<figure>上的min-height和图像上的outline ，是为了避免我在我最近关于CSS 3D技巧和窍门的文章中讨论的问题，而图像上的min-width确保了照片不会长得太大。大到可以重叠)。

The images are then evenly distributed around the central axis, using nth-child selectors:

然后，使用nth-child选择器将图像围绕中心轴均匀分布：

figure#spinner img:nth-child(1) {
	transform: rotateY(0deg);
}
figure#spinner img:nth-child(2) {
	transform: rotateY(-45deg);
}
figure#spinner img:nth-child(3) {
	transform: rotateY(-90deg);
}
figure#spinner img:nth-child(4) {
	transform: rotateY(-135deg);
}
figure#spinner img:nth-child(5) {
	transform: rotateY(-180deg);
}
figure#spinner img:nth-child(6) {
	transform: rotateY(-225deg);
}
figure#spinner img:nth-child(7) {
	transform: rotateY(-270deg);
}
figure#spinner img:nth-child(8) {
	transform: rotateY(-315deg);
}

At this stage, you’ll see that the 3D carousel is naturally responsive: as you narrow the browser window, the images get smaller, while the separation between them increases.

在此阶段，您将看到3D轮播具有自然响应能力：随着缩小浏览器窗口的范围，图像会变小，而它们之间的间隔也会增加。

Safari continues to have a bug in locating the origin of 3D elements; since Chrome is now prefix-free in regards to CSS 3D, only Safari should follow the hacked line of code needed for it to set the origin correctly. (You’ll still need to provide prefixed versions of the other transforms; they’re not included here to save space).

Safari在定位3D元素的来源方面仍然存在错误； 由于Chrome现在在CSS 3D方面是无前缀的，因此只有Safari应该遵循hack的代码行，以正确设置来源。 (您仍然需要提供其他转换的前缀版本；为了节省空间，此处不包括它们)。

JavaScript驱动的控件 (JavaScript-driven controls)

Finally, we want to add two controls for the gallery: a left and right arrow to control the spin. Adding the linked elements below the page, we’ll use them to call on a JavaScript function that carries a variable.

最后，我们要为图库添加两个控件：向左和向右箭头以控制旋转。 将链接的元素添加到页面下方，我们将使用它们来调用带有变量的JavaScript函数 。

<a href="#" style="float: left" onclick="galleryspin('-')">◀</a>
<a href="#" style="float: right" onclick="galleryspin('')">▶</a>

As you can see, the left-hand arrow carries a negative sign as a variable to a galleryspin function:

如您所见，左箭头带有一个负号作为Galleryspin函数的变量：

var angle = 0;
function galleryspin(sign) {
	spinner = document.querySelector("#spinner");
	if (!sign) {
		angle = angle + 45;
	} else {
		angle = angle - 45;
	}
	spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg);
	transform: rotateY("+ angle +"deg);");
}

The function looks at the sign variable, and, based on its absence or presence, adds or removes 45 degrees from the orientation of the gallery, producing the result you see at the top of this article.

该函数查看sign变量，并根据其是否存在，从图库的方向添加或删除45度，以产生您在本文顶部看到的结果。

问题 (Issues)

The code presented here works well in all modern browsers, with issues in just IE 10, as the browser can have problems supporting CSS 3D when it is applied to child elements.

此处提供的代码在所有现代浏览器中均能很好地运行，仅在IE 10中存在问题，因为当将浏览器应用于子元素时，该浏览器可能无法支持CSS 3D。

结论 (Conclusions)

Outside of wider browser support, there many possible improvements that we could make to the 3D carousel gallery, including:

除了更广泛的浏览器支持之外，我们还可以对3D轮播图片库进行许多可能的改进，包括：

• fading any images that are not front and center.
  淡化所有不在正面和中央的图像。
• abstracting the JavaScript to allow for any number of images to be added to the gallery.
  抽象化JavaScript以允许将任意数量的图像添加到图库。
• captions on the images.
  图片上的字幕。
• gesture support.
  手势支持。

Many of these advances are in the Advanced CSS 3D Carousel article, which comes next.

其中许多进步都在接下来的高级CSS 3D轮播文章中。

翻译自: https://thenewcode.com/690/Simple-CSS-3D-Carousel-Gallery

css3图片3d轮播