3D旋转相册
*{
padding:0
margin:0
}
body,
html{
height:100%
}
/*背景图片在这里设置*/
body{
background-image:url("images/beijing.jpg")
background-size:100%100%
}
#box{
width:280px
height:400px
position:fixed
left:0
right:0
top:0
bottom:0
margin:auto
transform-style:preserve-3d
transform:rotateX(0deg)rotateY(0deg)
animation:go45slinearinfinite
}
#boximg{
width:280px
height:400px
position:absolute
left:0
top:0
}
#boximg:nth-child(1){
transform:rotateY(0deg)translateZ(650px)
}
#boximg:nth-child(2){
transform:rotateY(36deg)translateZ(650px)
}
#boximg:nth-child(3){
transform:rotateY(72deg)translateZ(650px)
}
#boximg:nth-child(4){
transform:rotateY(108deg)translateZ(650px)
}
#boximg:nth-child(5){
transform:rotateY(144deg)translateZ(650px)
}
#boximg:nth-child(6){
transform:rotateY(180deg)translateZ(650px)
}
#boximg:nth-child(7){
transform:rotateY(216deg)translateZ(650px)
}
#boximg:nth-child(8){
transform:rotateY(252deg)translateZ(650px)
}
#boximg:nth-child(9){
transform:rotateY(288deg)translateZ(650px)
}
#boximg:nth-child(10){
transform:rotateY(324deg)translateZ(650px)
}
@keyframesgo{
0%{
transform:rotateX(0deg)rotateY(0deg)
}
25%{
transform:rotateX(20deg)rotateY(180deg)
}
50%{
transform:rotateX(0deg)rotateY(360deg)
}
75%{
transform:rotateX(-20deg)rotateY(540deg)
}
100%{
transform:rotateX(0deg)rotateY(720deg)
}
}
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
images/5.jpg
images/6.jpg
images/7.jpg
images/8.jpg
images/9.jpg
images/10.jpg
<style type="text/css">
body{background:black}
.point{position:absoluteheight:75pxborder:1px silver solid}
#round{position:absolutebackground:redwidth:200pxheight:200px}
</style>
<script>
var r=200,dv=0.01,w=100,x=400y=100,pn=8
var pi=3.1415926575,d=pi/2
var pd=Math.asin(w/2/r)ed=pi*2/pnsmove=true
function window.onload(){
var o=document.getElementById("imground")
var arrimg=o.getElementsByTagName("img")
for (n=0n<arrimg.lengthn++){
arrimg[n].onmouseout=function(){smove=true}
arrimg[n].onmouseover=function(){smove=false}
arrimg[n].onmousedown=function(){dv=dv*2}
}
setInterval(roundMove,20)
}
function roundMove(){
for (n=1n<=8n++){
var o=document.getElementById("p"+n)
var ta=Math.sin(d+ed*n)
var strFilter
if (ta<0)o.style.left=Math.cos(d+ed*n-pd)*r+x
else o.style.left=Math.cos(d+ed*n+pd)*r+x
o.style.top=ta*10+10+y
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r
o.style.zIndex=ta*10
if (o.style.zIndex<0) strFilter="FlipH(enabled:true)"
else strFilter="FlipH(enabled:false)"
if (ta<0) ta=(ta+1)*80+20else ta=100
strFilter=strFilter+" alpha(opacity="+ta+")"
o.style.opacity=ta/100
o.style.filter=strFilter
}
if (smove) d=d+dv
}
</script>
<div id="imground">
<img class="point" id="p1" src="1.jpg"/>
<img class="point" id="p2" src="2.jpg"/>
<img class="point" id="p3" src="3.jpg"/>
<img class="point" id="p4" src="4.jpg"/>
<img class="point" id="p5" src="5.jpg"/>
<img class="point" id="p6" src="6.jpg"/>
<img class="point" id="p7" src="7.jpg"/>
<img class="point" id="p8" src="8.jpg"/>
</div>看看这个是不是你要的效果。
以实现一张图片双面翻转为例：
方法一：
1、实现CSS样式的方法代码如下。
2、实现前端布局的方法代码如下。
3、实现图片翻转CSS样式代码如下。
方法二：
1、实现正反面效果的HTML的方法代码如下。
2、实现CSS样式的方法代码。
3、然后实现竖向翻转的方法代码如下。
