简单的图片3d效果
<style>#papa {
margin: auto;
margin-top: 100px;
width: 740px;
height: 500px;
border: thick ridge cyan;
transform-style: preserve-3d;
perspective: 1500px;
position: relative;
}
.image {
--deg: 45deg;
width: 360px;
height: 500px;
filter: drop-shadow(3px 3px 6px rgba(0,0,0,.5));
transform: rotateY(var(--deg));
transition: .75s;
}
.image:hover {
transform: rotateY(0) scale(1.2);
}
#papa .image:nth-of-type(2) {
--deg: -45deg;
}
</style>
<div id="papa">
<img alt="" class="image" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
<img alt="" class="image" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
</div>
代码
<style>
#papa {
margin: auto;
margin-top: 100px;
width: 740px;
height: 500px;
border: thick ridge cyan;
transform-style: preserve-3d;
perspective: 1500px;
position: relative;
}
.image {
--deg: 45deg;
width: 360px;
height: 500px;
filter: drop-shadow(3px 3px 6px rgba(0,0,0,.5));
transform: rotateY(var(--deg));
transition: .75s;
}
.image:hover {
transform: rotateY(0) scale(1.2);
}
#papa .image:nth-of-type(2) {
--deg: -45deg;
}
</style>
<div id="papa">
<img alt="" class="image" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
<img alt="" class="image" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
</div>
图片的父元素设置为3d转换场景（08行）并设置景深（09行）；
子元素（即图片）就可以通过 transform 进行相应的3d转换（旋转、移位、缩放、扭曲），一切视设计需求而定。
注：图片进入了3d转换状态后，其实体可能是非平面的，故而对设备指针的响应会有瑕疵（除非其正面正好面对视者）。 关于例中的伪类 nth-of-type ：
nth-of-type 基于 div、p、img 等元素类型，同时可以基于位置，但他不会对类名产生作用。例中23行代码，通过 #papa .image:nth-of-type(2) 限制了位置是 id="papa" 的元素内的类名为 .image 的标签的第二个，是通过位置精确指向第二章图片。 两张图图一张转45度，另一张转-45度，放在一起，还能知道转动方向了，真好{:4_187:} 有transition: .75s;所以鼠标上去拿边框也是逐渐消失的。 这个景深很奇妙，貌似这样的两张图图正面并排在框里放不下的，转一下倒是放下了呢{:4_173:} 父元素边框是740 500，图图大小事360 500 ，理论上框里应该能放下啊，怎么正面时好像变大了？ 谢谢老师精彩分享{:4_191:} 杨帆 发表于 2025-2-16 20:13
谢谢老师精彩分享
{:4_190:} 红影 发表于 2025-2-16 20:04
父元素边框是740 500，图图大小事360 500 ，理论上框里应该能放下啊，怎么正面时好像变大了？
3d变换不能用2d思维去理解 红影 发表于 2025-2-16 20:02
这个景深很奇妙，貌似这样的两张图图正面并排在框里放不下的，转一下倒是放下了呢
是的 红影 发表于 2025-2-16 19:58
两张图图一张转45度，另一张转-45度，放在一起，还能知道转动方向了，真好
{:4_190:} 红影 发表于 2025-2-16 19:59
有transition: .75s;所以鼠标上去拿边框也是逐渐消失的。
动画过程运行的时间 这个好看，一半在内一半在外。。
立体感好强。。 最近挑的晨妹妹这几张都很漂亮。。{:4_173:} 真是难为你啦{:4_189:} 要是能把手动起来就好了 为什么一放平就变大了呢 哇塞，3D效果出来了{:4_199:}