效果预览:
实现思路:
多个图片进行旋转,主要需要确定几个图片的旋转点:
主要确定了旋转点,图片在旋转的过程中就不会出现乱跑的情况。同时为了可以看到图片在三维空间的旋转效果,需要给图片的父元素main添加perspective: perserve-3d
使图片元素可以在3d空间进行显示。
实现代码:
html
<main>
<img src="/images/2.PNG" alt="">
<img src="/images/4.jpg" alt="">
<img src="/images/dog.jpg" alt="">
<img src="/images/1.jpg" alt="">
</main>
css
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #2C3A47 ;
}
/*设置父盒子最初的样式*/
main {
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
/*使父盒子在旋转的过程中子元素处于3d空间中*/
transform-style: preserve-3d;
/*设置旋转基点*/
transform-origin: right center -200px;
/*设置最初位置*/
transform: perspective(900px) translate(-80%, -80%);
transition: 10s;
}
/*设置图片的统一大小以及样式*/
main img {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
/*设置旋转基点*/
transform-origin: center center -200px;
}
/*设置每一个图片的旋转角度*/
main img:nth-child(1) {
transform: rotateY(90deg);
}
main img:nth-child(2) {
transform: rotateY(180deg);
}
main img:nth-child(3) {
transform: rotateY(270deg);
}
main img:nth-child(4) {
transform: rotateY(360deg);
}
/*当鼠标放置在页面上时,父盒子进行旋转操作来展示图片*/
body:hover main {
transform: perspective(900px) translate(-80%,-80%) rotateX(-45deg) rotateY(1000deg);
}