CSS进阶：试试酷炫的3D视角

正 20 边形，须要 20 个 div ，假设容器是 .img-bg1 ~ .img-bg20 ，那么每块图片的宽度为 174px，依次须要递增的角度为 18° ，并且我们须要计算出须要偏移的距离为 translateZ(543px)。

可以应用一些 CSS 预处理器处理这段代码，下面是 Sass 的写法：

// Sass 的写法 
 
$imgCount : 20 !default; 
 
@ for $i from 1 through $imgCount { 
 
.img-bg#{$i}{ 
 
background-position:($i * -174px + 174px) 0; 
 
transform: rotateY($i * 18deg) translateZ(543px); 
 
} 
 
}

看看效不雅： Demo(http://sbco.cc/demo/3dview/html/3dView2.html)

可以看到，图中近视为一个圆柱形，不过有一些小问题：

拔取的图片必须是阁下首尾相连的的，不然圆柱结合处会有明显的不调和，这就请求要应用这种方法制造 H5 页面的时刻，美术出的设计图必须阁下相连无违和感。
别的一点就是瓜分的块术，图片瓜分越多块，越近视为为一个圆柱，效不雅更佳。

做到这一步，只剩下最后一步，就是推动我们的视角，进入到圆柱内部，产生 3D 视图的感到。

内部的属性不是调剂修改 perspective 属性，而是调剂 translateZ 属性。经由过程控制 translateZ 获得的画面加倍真实，可以本身测验测验一下分别控制 perspective 与 translateZ 获得的效不雅，便会有深刻的感触感染。

我们经由过程 class 为 control 这个 div 控制这个效不雅，不过这里控制我们进入圆柱

下面这张图，大年夜小为 3480px * 2000px :

最后的效不雅： Demo(http://sbco.cc/demo/3dview/html/index.html)，因为是移动端效不雅，打开模仿器不雅看更佳

全部效不雅图太大年夜，只朝长进步了部分制造成 GIF：

还有一个小问题，那就是进入到圆柱内部之后，全部图片都反了过来，所以我们可能须要应用PS将原图进行一次阁下翻转，如许进入内部之后，看到的就是原图效不雅。

本文示例 Demo 已上传在我的 Github 上：

Css33DView(https://github.com/chokcoco/Css33DView)

【编辑推荐】

Web前端常识体系精简
早年端开辟者须要懂得的基本编译道理和说话常识
最风行的5个前端框架比较
不要再在JavaScript中写 CSS了
状况决定视图——基于状况的前端开辟思虑

【义务编辑：枯木 TEL：（010）68476606】

3/3 首页上一页 1 2 3

　　推荐阅读

　　青岛教育信息化:十大成果让青岛教育"更智慧"

大年夜2015年首届国际教导信息化大年夜会在青成功举办,到本年大年夜会持续绽放,两年的时光里,教导信息化乘着立异的春风,为全世界的学生们创造着更优良更好梦更聪明的进修和生活情况。两年>>>详细阅读

本文标题：CSS进阶：试试酷炫的3D视角

地址：http://www.17bianji.com/lsqh/36158.html

1/2 1