CSS3 transform实现图片旋转木马3D浏览效果

Author Avatar
Peipei Wong 4月 24, 2016
  • 在其它设备中阅读本文章

首先DOM结构: 舞台>容器>图片
为舞台设置样式: perspective: 800px;
为容器设置样式:transform-style: preserve-3d;position: relative;transition: transform .8s;
元素本身style属性设置为transform: rotateY(0deg);为后面容器旋转获得初始值
为图片设置样式:position: absolute;
为每个图片设置样式(此时又九张图片):

img:nth-child(1) { transform: rotateY(   0deg ) translateZ(195.839px); }
img:nth-child(2) { transform: rotateY(  40deg ) translateZ(195.839px); }
img:nth-child(3) { transform: rotateY(  80deg ) translateZ(195.839px); }
img:nth-child(4) { transform: rotateY( 120deg ) translateZ(195.839px); }
img:nth-child(5) { transform: rotateY( 160deg ) translateZ(195.839px); }
img:nth-child(6) { transform: rotateY( 200deg ) translateZ(195.839px); }
img:nth-child(7) { transform: rotateY( 240deg ) translateZ(195.839px); }
img:nth-child(8) { transform: rotateY( 280deg ) translateZ(195.839px); }
img:nth-child(9) { transform: rotateY( 320deg ) translateZ(195.839px); }

rotateY的值为360/图片的个数translateZ的值为(图片宽度/2)/ tan(rorateY/2)
最后,在js代码中改变容器的rotateY的值:代码如下:

var stage = document.getElementById("stage");
stage.addEventListener('click',function() {
  var rotateY = this.style.webkitTransform;
  // 由左向右:rotateY-40
  var newPos = parseInt(rotateY)-40; 
  this.style.webkitTransform = 'rotateY(' + newPos + 'deg)';
});