如何实现360度图像旋转

Question

我想在客户端实现360度旋转3D图像，

像this

之类的东西

1）WebGL最好这样做吗？

2）从哪里开始？

Answer 1

要回答您的问题，请使用css转换来定义名为spin

的类

img.spin { 
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
}

然后将该类添加到您的图像

<img src="your image" class="spin" />

...or if you're feeling animated

@-webkit-keyframes twist {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(359deg); }
}

img.twist {
    -webkit-animation: twist 5s infinite; /* Safari 4+ */
  -moz-animation:    twist 5s infinite; /* Fx 5+ */
  -o-animation:      twist 5s infinite; /* Opera 12+ */
  animation:         twist 5s infinite; 
}