简单的3d旋转相册-爱代码爱编程
css样式部分:
<style>
body:hover main{
transform: rotateY(360deg);
}
body{
/* 景深只对子标签有效果,自身没有3d效果 */
perspective: 1000px;
/* 景深的基准点,默认是50% 50% 就是正对中心看 */
/* 可以调整基准点,从上斜向下看 */
perspective-origin: 50% 10%;
}
main{
transition: 10s;
width: 1000px;
height: 500px;
/* border: 1px solid; */
margin: auto;
/* perspective景深也不会对字标签的字标签起效 */
/* 通过以下属性传递景深3d效果,使下层子标签也有3d效果 */
transform-style: preserve-3d;
}
div{
width: 100px;
height: 200px;
background-color: orangered;
position: absolute;
margin: 150px 450px;
/* 透明度 */
/* opacity: 0.4; */
}
img{
width: 100%;
height: 100%;
}
</style>
内容部分:
<main>
<div style="transform: rotateY(0deg) translateZ(300px);">
<img src=" 图片地址(可以离线或网址) " alt="">
</div>
<div style="transform: rotateY(30deg) translateZ(300px);">
<img src=" 图片地址(可以离线或网址) " alt="">
</div>
(此处省略10个div)
......(下面可以对上面进行复制粘贴, rotateY()内的旋转酵素需要变化,这里因为有12张图片,所以每一个角度为360/12为30,自己可以根据需要进行添加或减小。translateZ(300px)不变)。
</main>