瞧瞧这个

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 100px;
   
4.         width: 60px;
   
5.         height: 60px;
   
6.         background: lightblue;
   
7.         box-shadow: -10px -20px 30px navy inset;
   
8.         border-radius: 50%;
   
9.         position: relative;
   
10. }
    
11. #mydiv::before, #mydiv::after {
    
12.         --deg: 360deg;
    
13.         position: absolute;
    
14.         content: '';
    
15.         left: -40px;
    
16.         top: -40px;
    
17.         bottom: -40px;
    
18.         right: -40px;
    
19.         border: 6px dotted navy;
    
20.         border-radius: 50%;
    
21.         transform: perspective(1600px) rotateX(45deg) rotateY(15deg);
    
22.         animation: rot 8s linear infinite;
    
23. }
    
24. #mydiv::after {
    
25.         --deg: -360deg;
    
26.         left: -50px;
    
27.         top: -50px;
    
28.         right: -50px;
    
29.         bottom: -50px;
    
30. }
    
31. @keyframes rot {
    
32.         to { transform: perspective(1600px) rotateX(45deg) rotateY(15deg) rotateZ(var(--deg)); }
    
33. }
    
34. </style>
    
35. 
    
36. <div id="mydiv"></div>

复制代码

马黑黑

3d景深（perspective）也可以直接写在需要3d转换的元素中，集成在 transform 语句里。例如上述实例就是这么干，再例如，假设我们需要一个元素沿Y轴旋转60度，景深设为800px：

transform: perspective(800px) rotateY(60deg);

这个写法，貌似 transform-style 属性都不用设置。

红影

加上景深，还可以做空间旋转。这个真漂亮，可以适用范围更广了，对于需要倾斜方向转动图片，用上去更贴切了

马黑黑

红影 发表于 2023-2-20 23:14
加上景深，还可以做空间旋转。这个真漂亮，可以适用范围更广了，对于需要倾斜方向转动图片，用上去更贴切了 ...

貌似如此

马黑黑

醉美水芙蓉 发表于 2023-2-20 23:14
黑黑老师真厉害！又做了3D效果播放器！

这个还木有与音乐关联

马黑黑

醉美水芙蓉 发表于 2023-2-20 23:19
这个对于老师来说小菜一碟！

那倒是容易

梦油

这个播放器挺有意思。

马黑黑

梦油 发表于 2023-2-21 09:17
这个播放器挺有意思。

这里它还不是播放控制器

梦油

马黑黑 发表于 2023-2-21 12:12
这里它还不是播放控制器

哦，知道了。

马黑黑

梦油 发表于 2023-2-21 14:16
哦，知道了。

红影

马黑黑 发表于 2023-2-20 23:15
貌似如此

这个应该也可以单独做为动画效果，不跟音乐关联

马黑黑

红影 发表于 2023-2-21 21:40
这个应该也可以单独做为动画效果，不跟音乐关联

说得对

红影

马黑黑 发表于 2023-2-21 21:43
说得对

我已经试过了

马黑黑

红影 发表于 2023-2-22 18:51
我已经试过了

试过的说的更有底气

红影

马黑黑 发表于 2023-2-22 19:33
试过的说的更有底气

作为效果还挺好看的

马黑黑

红影 发表于 2023-2-22 20:55
作为效果还挺好看的

挺好挺好

红影

马黑黑 发表于 2023-2-22 21:40
挺好挺好

那是当然，黑黑带来的效果必须好