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

本文详细介绍了一种利用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);
}

完成!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值