看到有些人好奇用css怎么写出3D旋转相册的效果.
这里说说一种方法.
首先看一下效果
写出这样的效果可以使用css的transform3D的变换效果:
第一步写出主体
注意:因为演示都是使用同一张背景图来写的,所以没有插入图片.可以选择插入图片,或者插入各自的背景图
<body>
<div>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
</body>
然后给开启3D,设置3D景深,因为小demo所以直接给body开启了景深.
body {
perspective: 1000px;
}
div {
position: relative;
width: 400px;
height: 400px;
margin: 300px auto;
transform-style: preserve-3d;
}
然后给section设置背景图.与样式.
section {
position: absolute;
width: 400px;
height: 300px;
background-image: url(./2.png);
}
设置好section的样式之后,就可以开始调整每个相片所在的位置了,因为图片的调整可能因为视角问题不方便观察.可以给其父元素div,设置transform: rotate(deg);旋转其位置,方便观察.
对于图片的调整可以在浏览器中运行,通过检查调整,然后复制粘贴到代码里.更加直观一些.
section:nth-child(1) {
transform: translateZ(450px);
}
section:nth-child(2) {
transform: rotateY(60deg) translateZ(450px);
}
section:nth-child(3) {
transform: rotateY(120deg) translateZ(450px);
}
section:nth-child(4) {
transform: rotateY(180deg) translateZ(450px);
}
section:nth-child(5) {
transform: rotateY(240deg) translateZ(450px);
}
section:nth-child(6) {
transform: rotateY(300deg) translateZ(450px);
}
调整好之后页面并不会变动,只是静态.
这时候使用动画即可.设置关键帧:
注意:省略0%就是默认0是原始位置.
@keyframes move {
100% {
transform: rotateY(360deg);
}
}
然后给需要移动的div加上
animation: move 30s linear infinite ;
就可以实现图像旋转的效果了.
如果需要实现鼠标移入图像停止旋转也很简单.只需要设置鼠标hover的时候动画暂停就可以了.
div:hover {
animation-play-state:paused;
}