CSS3 实现全景图浏览效果
Demo实现思路利用 CSS3 做出一个 3D 立方体。在立方体的6个面设置目标图片（利用Pano2VR 或者类似的全景工具导出的图片，一共有6张）。使用perspective、translateZ、transform-style: preserve-3d 等属性改变视图的大小。添加触摸事件改变translateX、translateY的角度数即可实现一个基本的全景图效果。注：页面使用了ES6，浏...
3 年前
Web
使用 background-size 让精灵图实现自适应缩放
background-size 除了可以设置 cover、contain 这两个值，还可以自定义设置大小，比如：backgound-size: 10px 20px 或者 background-size: 10% 20%，前者以像素为单位表示背景图的大小宽10px 高20px，后者以百分比为单位基于父元素大小计算，效果与 img 标签的 width、height 是一样的。如果要实现背景图自适应缩...
4 年前
Web
