java旋转相册教程



CSS部分：

html




{

background</span>:<span style="color: rgba(0, 0, 255, 1)"> #000</span>;<span style="color: rgba(255, 0, 0, 1)"> height</span>:<span style="color: rgba(0, 0, 255, 1)"> 100%</span>; 

} /最外层容器样式/ .wrap{

position</span>:<span style="color: rgba(0, 0, 255, 1)"> relative</span>;<span style="color: rgba(255, 0, 0, 1)"> position</span>:<span style="color: rgba(0, 0, 255, 1)"> absolute</span>;<span style="color: rgba(255, 0, 0, 1)"> top</span>:<span style="color: rgba(0, 0, 255, 1)"> 0</span>;<span style="color: rgba(255, 0, 0, 1)"> right</span>:<span style="color: rgba(0, 0, 255, 1)"> 0</span>;<span style="color: rgba(255, 0, 0, 1)"> bottom</span>:<span style="color: rgba(0, 0, 255, 1)"> 0</span>;<span style="color: rgba(255, 0, 0, 1)"> left</span>:<span style="color: rgba(0, 0, 255, 1)"> 0</span>;<span style="color: rgba(255, 0, 0, 1)"> width</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;<span style="color: rgba(255, 0, 0, 1)"> height</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;<span style="color: rgba(255, 0, 0, 1)"> margin</span>:<span style="color: rgba(0, 0, 255, 1)"> auto</span>; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">改变左右上下,图片方块移动</span><span style="color: rgba(0, 128, 0, 1)">*/</span> 

} /包裹所有容器样式/ .cube{

width</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;<span style="color: rgba(255, 0, 0, 1)"> height</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;<span style="color: rgba(255, 0, 0, 1)"> margin</span>:<span style="color: rgba(0, 0, 255, 1)"> 0 auto</span>;<span style="color: rgba(255, 0, 0, 1)"> transform-style</span>:<span style="color: rgba(0, 0, 255, 1)"> preserve-3d</span>;<span style="color: rgba(255, 0, 0, 1)"> transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(-30deg) rotateY(-80deg)</span>;<span style="color: rgba(255, 0, 0, 1)"> -webkit-animation</span>:<span style="color: rgba(0, 0, 255, 1)"> rotate 20s infinite</span>; <span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">匀速</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(255, 0, 0, 1)"> animation-timing-function</span>:<span style="color: rgba(0, 0, 255, 1)"> linear</span>; 

} @-webkit-keyframes rotate{

from{transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(0deg) rotateY(0deg)</span>;}<span style="color: rgba(128, 0, 0, 1)"> to</span>{<span style="color: rgba(255, 0, 0, 1)">transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(360deg) rotateY(360deg)</span>;}<span style="color: rgba(128, 0, 0, 1)"> 

} .cube div{

position</span>:<span style="color: rgba(0, 0, 255, 1)"> absolute</span>;<span style="color: rgba(255, 0, 0, 1)"> width</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;<span style="color: rgba(255, 0, 0, 1)"> height</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;<span style="color: rgba(255, 0, 0, 1)"> opacity</span>:<span style="color: rgba(0, 0, 255, 1)"> 0.8</span>;<span style="color: rgba(255, 0, 0, 1)"> transition</span>:<span style="color: rgba(0, 0, 255, 1)"> all .4s</span>; 

} /定义所有图片样式/ .pic{

width</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>;<span style="color: rgba(255, 0, 0, 1)"> height</span>:<span style="color: rgba(0, 0, 255, 1)"> 200px</span>; 

} .cube .out_front{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(0deg) translateZ(100px)</span>; 

} .cube .out_back{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> translateZ(-100px) rotateY(180deg)</span>; 

} .cube .out_left{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(90deg) translateZ(100px)</span>; 

} .cube .out_right{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(-90deg) translateZ(100px)</span>; 

} .cube .out_top{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(90deg) translateZ(100px)</span>; 

} .cube .out_bottom{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(-90deg) translateZ(100px)</span>; 

} /定义小正方体样式/ .cube span{

display</span>:<span style="color: rgba(0, 0, 255, 1)"> block</span>;<span style="color: rgba(255, 0, 0, 1)"> width</span>:<span style="color: rgba(0, 0, 255, 1)"> 100px</span>;<span style="color: rgba(255, 0, 0, 1)"> height</span>:<span style="color: rgba(0, 0, 255, 1)"> 100px</span>;<span style="color: rgba(255, 0, 0, 1)"> position</span>:<span style="color: rgba(0, 0, 255, 1)"> absolute</span>;<span style="color: rgba(255, 0, 0, 1)"> top</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;<span style="color: rgba(255, 0, 0, 1)"> left</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>; 

} .cube .in_pic{

width</span>:<span style="color: rgba(0, 0, 255, 1)"> 100px</span>;<span style="color: rgba(255, 0, 0, 1)"> height</span>:<span style="color: rgba(0, 0, 255, 1)"> 100px</span>; 

} .cube .in_front{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(0deg) translateZ(50px)</span>; 

} .cube .in_back{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> translateZ(-50px) rotateY(180deg)</span>; 

} .cube .in_left{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(90deg) translateZ(50px)</span>; 

} .cube .in_right{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(-90deg) translateZ(50px)</span>; 

} .cube .in_top{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(90deg) translateZ(50px)</span>; 

} .cube .in_bottom{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(-90deg) translateZ(50px)</span>; 

} /鼠标移入后样式/ .cube:hover .out_front{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(0deg) translateZ(200px)</span>; 

} .cube:hover .out_back{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> translateZ(-200px) rotateY(180deg)</span>; 

} .cube:hover .out_left{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(90deg) translateZ(200px)</span>; 

} .cube:hover .out_right{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateY(-90deg) translateZ(200px)</span>; 

} .cube:hover .out_top{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(90deg) translateZ(200px)</span>; 

} .cube:hover .out_bottom{

transform</span>:<span style="color: rgba(0, 0, 255, 1)"> rotateX(-90deg) translateZ(200px)</span>; 

}

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.bianchenghao6.com/h6javajc/14849.html