java3d翻转纪念相册_HTML5 3D旋转相册的实现示例

前一段时间，突然看到一个炫酷的3D旋转相册，这里记录一下，先看效果图：

HTML5 代码如下：

HTML5 3D旋转图片相册 可鼠标悬停

* {

padding: 0;

margin: 0;

border: none;

outline: none;

box-sizing: border-box;

}

*:before,

*:after {

box-sizing: border-box;

}

html,

body {

min-height: 100%;

}

body {

background-image: radial-gradient(mintcream 0%, lightgray 100%);

;

}

.Container {

margin: 4% auto;

width: 210px;

height: 140px;

position: relative;

perspective: 1000px;

}

#carousel {

width: 100%;

height: 100%;