3D动画展示--3D图片旋转展示

最新推荐文章于 2022-12-26 17:09:37 发布

原创最新推荐文章于 2022-12-26 17:09:37 发布 · 1.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#3D动画展示 #3D图片旋转 #css #透视效果

css 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了一种利用HTML和CSS实现3D图片旋转展示的方法。通过设置div元素的3D旋转和透视效果，使六张图片围绕一个中心点旋转，当鼠标悬停在section元素上时，图片会进行360度旋转。文章提供了完整的代码示例，包括HTML结构、CSS样式及过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3D图片旋转展示

在这里插入图片描述
下面是6个div放置6张周围旋转的图,html如下

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

下面是css样式,body样式为 perspective: 1000px;添加透视效果

body {
    perspective: 1000px;
}

section里面放置里面的一张图和设置3d透视

section {
    margin: 100px auto;
    width: 450px;
    height: 300px;
    background: url(untitled/2.jpg) no-repeat;
    transform-style: preserve-3d;/*设置3d透视*/
    position: relative;
    transition: 5s linear;/*过渡效果*/
}

设置div样式,脱离文档流

section div {
    width: 450px;
    height: 300px;
    background: url(untitled/7.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
}

section添加伪类:hover,鼠标进入盒子旋转

section:hover {
    transform: rotateY(360deg);
}

下面为周边旋转的6张图片的位置

section div:nth-child(1) {
    transform: rotateY(0deg) translateZ(500px);
}
section div:nth-child(2) {
    transform: rotateY(60deg) translateZ(500px);
}
section div:nth-child(3) {
    transform: rotateY(120deg) translateZ(500px);
}
section div:nth-child(4) {
    transform: rotateY(180deg) translateZ(500px);
}
section div:nth-child(5) {
    transform: rotateY(240deg) translateZ(500px);
}
section div:nth-child(6) {
    transform: rotateY(300deg) translateZ(500px);
}

完成!