css3d轮播图_先进CSS 3D轮播

css3d轮播图

The latest iteration of the CSS 3D Carousel is much improved over the version I demonstrated a few months ago, although it still has a ways to go. The code is a little complex to explain in a single blog post, although I do plan to share aspects of its development in future articles. I’ve left the complete code at CodePen for you to play with, if you’re interested.

CSS 3D Carousel的最新版本比我几个月前展示的版本有了很大的改进，尽管还有很多路要走。 尽管我确实计划在以后的文章中分享其开发的各个方面，但是在单个博客文章中解释该代码有点复杂。 如果您有兴趣，我已经将完整的代码留在了CodePen上供您使用 。

So what’s different in this version?

那么这个版本有什么不同？

• Each image is contained in its own separate figure, with its own caption. (mouseover the forefront image to see its caption).
  每个图像都包含在其自己的单独图片中，并带有自己的标题。 (将鼠标悬停在最前面的图像上以查看其标题)。

• The distribution of carousel images is made entirely in JavaScript, which handles an arbitrary number of elements: try removing some of the figures from the CodePen version, for example.

  轮播图片的分发完全由JavaScript处理，该JavaScript处理任意数量的元素：例如，尝试从CodePen版本中删除一些图形。

• Click-to-zoom is enabled on the foreground image.
  单击缩放在前景图像上启用。

• Keyboard controls are available: cursor right and left to rotate the carousel, Z to toggle zoom on the foreground image, and C to toggle its caption.

  可以使用键盘控件：向右和向左光标旋转转盘，使用Z切换前景图像的缩放，使用C切换标题。

即将到来的改进： (Improvements to come:)

• I’m still struggling with a bug in desktop and mobile Safari, which displaces the transform-origin-z coordinate for the gallery, pushing it forward in the browser. I’m hoping that this will be fixed in iOS / Safari 7. (Update: it wasn’t, unfortunately).

  我仍在努力解决台式机和移动Safari中的错误，该错误会替换图库的transform-origin-z坐标，并在浏览器中向前推动。 我希望这将在iOS / Safari 7中得到修复。( 不幸的是，它不是 )。

• Similarly, IE 10+ displays the carousel incorrectly due to its lack of support for transform-style.

  同样，IE 10+由于缺少对transform-style的支持，因此无法正确显示轮播。

• Display at small viewport sizes needs to be improved; I’ll add swipe gesture support once the Safari and IE display problem are licked.
  小视口的显示需要改进； 一旦Safari和IE显示问题解决，我将添加滑动手势支持。
• As the number of images in the gallery increases, the radius of the carousel should increase to fit them all.
  随着图库中图像数量的增加，轮播的半径应增加以适合所有图像。
• It’s my eventual goal to turn the CSS 3D Carousel Gallery into a bit of automated JavaScript: this will mean creating display fallbacks for earlier versions of IE and older browsers.
  我的最终目标是将CSS 3D Carousel Gallery变成一些自动化JavaScript：这意味着为早期版本的IE和较旧的浏览器创建显示后备。

翻译自: https://thenewcode.com/736/Advanced-CSS-3D-Carousel

css3d轮播图