html旋转相册,css3 旋转相册

旋转图片.png

直接上代码，相信大家一看就懂

html

css代码

*{

margin: 0;

padding: 0;

}

#wrap{

perspective: 900px; /*在这里开启景深，因为box也需要转动*/

}

.box{

transform-style: preserve-3d;

width: 300px;

height: 200px;

margin: 200px auto;

position: relative;

animation: rotate 10s linear infinite;

/*backface-visibility: hidden;*/ /*开启了，后半圈会看不到，因为隐藏了背面*/

}

img{

width: 300px;

height: 200px;

position: absolute;

left: 0;

top: 0;

}

@keyframes rotate {

from{

/*rotateX(-15deg) 变成一个俯视的视角*/

transform:rotateX(-15deg) rotateY(0deg);

}

to{

transform:rotateX(-15deg) rotateY(360deg);

}

}

js代码

var oImgs = document.querySelectorAll("img");

//sin/cos/tan 里面只能写弧度，故要做转换

var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);

//这里提醒一点，要先绕Y轴转，再Z轴平移，z轴始终垂直于平面

oImgs.forEach(function (item,index,arr) {

item.style.transform = "rotateY(" +index * 360 / oImgs.length+ "deg)

translateZ("+ ImgtranslateZ +"px)" ;

})

代码打包

旋转相册

*{

margin: 0;

padding: 0;

}

#wrap{

perspective: 900px; /*在这里开启景深，因为box也需要转动*/

}

.box{

transform-style: preserve-3d;

width: 300px;

height: 200px;

margin: 200px auto;

position: relative;

animation: rotate 10s linear infinite;

/*backface-visibility: hidden;*/ /*开启了，后半圈会看不到，因为隐藏了背面*/

}

img{

width: 300px;

height: 200px;

position: absolute;

left: 0;

top: 0;

}

@keyframes rotate {

from{

/*rotateX(-15deg) 变成一个俯视的视角*/

transform:rotateX(-15deg) rotateY(0deg);

}

to{

transform:rotateX(-15deg) rotateY(360deg);

}

}

var oImgs = document.querySelectorAll("img");

//sin/cos/tan 里面只能写弧度，故要做转换

var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);

//这里提醒一点，要先绕Y轴转，再Z轴平移，z轴始终垂直于平面

oImgs.forEach(function (item,index,arr) {

item.style.transform = "rotateY(" +index * 360 / oImgs.length+ "deg) translateZ("+ ImgtranslateZ +"px)" ;

})