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和较旧的浏览器创建显示后备。
css3d轮播图