图片/图形
超酷3D立方体空间旋转图片画廊特效
PetitQ
这是一款效果非常炫酷的 CSS3 3D 立方体空间旋转图片画廊特效。该特效实际是一个 3D 立方体，在其内部显示图片。在点击立方体每一面的图片时，这张图片就会放大到屏幕的中间，效果非常的酷。因为 IE 浏览器不支持 transform-style: preserve-3d;属性，所以在 IE 浏览器中是看不到立方体效果的。
HTML 结构
该图片画廊特效的 HTML 结构采用立方体的 HTML 结构。每一个立方体的面使用一个<img>元素来制作，并在其上分别使用 data-transform 属性来标注这个面需要旋转转换的角度，后面再使用 js 来将其转换为 CSS 样式。
也想出现在这里？联系我们吧
<div id="screen">
<div id="cube" class='cube'>
<!-- cube images -->
<img id="1" src="img/1.jpg" class='face' data-transform="translateZ(-400px)" style="outline:none !important">
<img id="2" src="img/2.jpg" class='face' data-transform="rotateY(90deg) translateZ(-400px)">
<img id="3" src="img/3.jpg" class='face' data-transform="rotateY(-90deg) translateZ(-400px)">
<img id="4" src="img/4.jpg" class='face' data-transform="rotateY(180deg) translateZ(-400px)">
<img id="5" src="img/5.jpg" class='face' data-transform="rotateX(90deg) translateZ(-300px)">
<img id="6" src="img/6.jpg" class='face' data-transform="rotateX(-90deg) translateZ(-300px)">
<!-- bonus image -->
<img id="7" src="img/7.jpg" class='face' data-transform="rotateY(180deg) translateZ(305px)" style="visibility:hidden">
<!-- buttons -->
<img src="img/7.jpg" class='face button' alt="7" data-transform="translateY(-80px) translateZ(-340px) scale(0.5)">
<img src="img/6.jpg" class='face button' alt="2" data-transform="translateX(-200px) translateY(-80px) translateZ(-340px) scale(0.5)">
<img src="img/3.jpg" class='face button' alt="3" data-transform="translateX(200px) translateY(-80px) translateZ(-340px) scale(0.5)">
<img src="img/4.jpg" class='face button' alt="4" data-transform="translateY(80px) translateZ(-340px) scale(0.5)">
<img src="img/5.jpg" class='face button' alt="5" data-transform="translateX(-200px) translateY(80px) translateZ(-340px) scale(0.5)">
<img src="img/6.jpg" class='face button' alt="6" data-transform="translateX(200px) translateY(80px) translateZ(-340px) scale(0.5)">
</div>
</div>
img.button 是正面墙上的每幅图片的缩略图。同样使用 data-transform 属性来标注它们的 CSS 属性。
HTML 结构
该图片画廊特效的 HTML 结构采用立方体的 HTML 结构。每一个立方体的面使用一个元素来制作，并在其上分别使用 data-transform 属性来标注这个面需要旋转转换的角度，后面再使用 js 来将其转换为 CSS 样式。
<div id="screen">
<div id="cube" class='cube'>
<!-- cube images -->
<img id="1" src="img/1.jpg" class='face' data-transform="translateZ(-400px)" style="outline:none !important">
<img id="2" src="img/2.jpg" class='face' data-transform="rotateY(90deg) translateZ(-400px)">
<img id="3" src="img/3.jpg" class='face' data-transform="rotateY(-90deg) translateZ(-400px)">
<img id="4" src="img/4.jpg" class='face' data-transform="rotateY(180deg) translateZ(-400px)">
<img id="5" src="img/5.jpg" class='face' data-transform="rotateX(90deg) translateZ(-300px)">
<img id="6" src="img/6.jpg" class='face' data-transform="rotateX(-90deg) translateZ(-300px)">
<!-- bonus image -->
<img id="7" src="img/7.jpg" class='face' data-transform="rotateY(180deg) translateZ(305px)" style="visibility:hidden">
<!-- buttons -->
<img src="img/7.jpg" class='face button' alt="7" data-transform="translateY(-80px) translateZ(-340px) scale(0.5)">
<img src="img/6.jpg" class='face button' alt="2" data-transform="translateX(-200px) translateY(-80px) translateZ(-340px) scale(0.5)">
<img src="img/3.jpg" class='face button' alt="3" data-transform="translateX(200px) translateY(-80px) translateZ(-340px) scale(0.5)">
<img src="img/4.jpg" class='face button' alt="4" data-transform="translateY(80px) translateZ(-340px) scale(0.5)">
<img src="img/5.jpg" class='face button' alt="5" data-transform="translateX(-200px) translateY(80px) translateZ(-340px) scale(0.5)">
<img src="img/6.jpg" class='face button' alt="6" data-transform="translateX(200px) translateY(80px) translateZ(-340px) scale(0.5)">
</div>
</div>
img.button 是正面墙上的每幅图片的缩略图。同样使用 data-transform 属性来标注它们的 CSS 属性。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
