CSS3 实现全景图浏览效果

Demo实现思路利用 CSS3 做出一个 3D 立方体。在立方体的6个面设置目标图片(利用Pano2VR 或者类似的全景工具导出的图片,一共有6张)。使用perspective、translateZ、transform-style: preserve-3d 等属性改变视图的大小。添加触摸事件改变translateX、translateY的角度数即可实现一个基本的全景图效果。注:页面使用了ES6,浏...

使用 background-size 让精灵图实现自适应缩放

background-size 除了可以设置 cover、contain 这两个值,还可以自定义设置大小,比如:backgound-size: 10px 20px 或者 background-size: 10% 20%,前者以像素为单位表示背景图的大小宽10px 高20px,后者以百分比为单位基于父元素大小计算,效果与 img 标签的 width、height 是一样的。如果要实现背景图自适应缩...