简单的图片3d效果

马黑黑

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         margin-top: 100px;
   
5.         width: 740px;
   
6.         height: 500px;
   
7.         border: thick ridge cyan;
   
8.         transform-style: preserve-3d;
   
9.         perspective: 1500px;
   
10.         position: relative;
    
11. }
    
12. .image {
    
13.         --deg: 45deg;
    
14.         width: 360px;
    
15.         height: 500px;
    
16.         filter: drop-shadow(3px 3px 6px rgba(0,0,0,.5));
    
17.         transform: rotateY(var(--deg));
    
18.         transition: .75s;
    
19. }
    
20. .image:hover {
    
21.         transform: rotateY(0) scale(1.2);
    
22. }
    
23. #papa .image:nth-of-type(2) {
    
24.         --deg: -45deg;
    
25. }
    
26. </style>
    
27. 
    
28. <div id="papa">
    
29.         <img alt="" class="image" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
    
30.         <img alt="" class="image" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
    
31. </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度，放在一起，还能知道转动方向了，真好

红影

有transition: .75s;所以鼠标上去拿边框也是逐渐消失的。

红影

这个景深很奇妙，貌似这样的两张图图正面并排在框里放不下的，转一下倒是放下了呢

红影

父元素边框是740 500，图图大小事360 500 ，理论上框里应该能放下啊，怎么正面时好像变大了？

杨帆

谢谢老师精彩分享

马黑黑

杨帆 发表于 2025-2-16 20:13
谢谢老师精彩分享

马黑黑

红影 发表于 2025-2-16 20:04
父元素边框是740 500，图图大小事360 500 ，理论上框里应该能放下啊，怎么正面时好像变大了？

3d变换不能用2d思维去理解

马黑黑

红影 发表于 2025-2-16 20:02
这个景深很奇妙，貌似这样的两张图图正面并排在框里放不下的，转一下倒是放下了呢

是的

马黑黑

红影 发表于 2025-2-16 19:58
两张图图一张转45度，另一张转-45度，放在一起，还能知道转动方向了，真好

马黑黑

红影 发表于 2025-2-16 19:59
有transition: .75s;所以鼠标上去拿边框也是逐渐消失的。

动画过程运行的时间

花飞飞

这个好看，一半在内一半在外。。
立体感好强。。

花飞飞

最近挑的晨妹妹这几张都很漂亮。。

樵歌

真是难为你啦

樵歌

要是能把手动起来就好了

绿叶清舟

为什么一放平就变大了呢

小辣椒

哇塞，3D效果出来了