超酷3D立方体空间旋转图片画廊特效

这是一款效果非常炫酷的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属性。

CSS样式

该图片画廊的初始CSS样式非常简单。图片画廊包裹容器div#screen被制作为和屏幕相同大小的3D空间。头速度为500。

#screen {
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background:#000;
  perspective:500px;
  -webkit-perspective:500px;
}           
              

div.cube是立方体，它被居中显示，并使用transform-style: preserve-3d;来制作立方体。因为IE浏览器不支持这个属性，所以看不到立方体效果。

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
  user-select: none;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}                
              

立方体的各个面采用绝对定位，并设置固定的宽度和高度。并使用backface-visibility: hidden;将背面进行隐藏。同时将各个面的转换中心都设置到面的中心点上。

.face {
  position: absolute;
  margin-left:-300px;
  margin-top:-200px;
  width:600px;
  height:400px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
  transition: outline 0.5s ease-in-out 0s;
  cursor: pointer;
}               
              

立方体的旋转和各个面的点击和移动触摸事件都在js代码中完成。具体的js代码请参考现在文件的main.js文件。