CSS+HTML实现3D图片旋转效果
在做JavaEE的项目设计的时候，觉得页面过于单调，就学着百度上的图片轮转效果，自己也写了一个，记录一下；
index.html部分源码：
html{background:#fff000;height: 100%;}/*最外层容器样式*/.wrap{width: 200px;height: 200px;/*改变左右上下,图片方块移动*/margin: 150px 360px;position: relative;}/*包裹所有容器样式*/.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;}@-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}.cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;}/*定义所有图片样式*/.pic{width: 200px;height: 200px;}.cube .out_front{transform: rotateY(0deg) translateZ(100px);}.cube .out_back{transform: translateZ(-100px) rotateY(180deg);}.cube .out_left{transform: rotateY(90deg) translateZ(100px);}.cube .out_right{transform: rotateY(-90deg) translateZ(100px);}.cube .out_top{transform: rotateX(90deg) translateZ(100px);}.cube .out_bottom{transform: rotateX(-90deg) translateZ(100px);}/*定义小正方体样式*/.cube span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;}.cube .in_pic{width: 100px;height: 100px;}.cube .in_front{transform: rotateY(0deg) translateZ(50px);}.cube .in_back{transform: translateZ(-50px) rotateY(180deg);}.cube .in_left{transform: rotateY(90deg) translateZ(50px);}.cube .in_right{transform: rotateY(-90deg) translateZ(50px);}.cube .in_top{transform: rotateX(90deg) translateZ(50px);}.cube .in_bottom{transform: rotateX(-90deg) translateZ(50px);}/*鼠标移入后样式*/.cube:hover .out_front{transform: rotateY(0deg) translateZ(200px);}.cube:hover .out_back{transform: translateZ(-200px) rotateY(180deg);}.cube:hover .out_left{transform: rotateY(90deg) translateZ(200px);}.cube:hover .out_right{transform: rotateY(-90deg) translateZ(200px);}.cube:hover .out_top{transform: rotateX(90deg) translateZ(200px);}.cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px);}
效果：
在线演示：/test/index.html
