纯CSS 3d旋转的小播

马黑黑

马黑黑

代码：

1. 
   
2. <style>
   
3.     .wrapper {
   
4.         margin: 30px auto;
   
5.         width: 740px;
   
6.         height: 460px;
   
7.         border: 1px solid gray;
   
8.         display: grid;
   
9.         place-items: center;
   
10.         perspective: 1000px;
    
11.         position: relative;
    
12.     }
    
13.     .sdiv {
    
14.         position: absolute;
    
15.         width: 200px;
    
16.         height: 200px;
    
17.         background: url('https://638183.freep.cn/638183/small/ytji_133877216020393750.png') no-repeat center/cover;
    
18.         filter: drop-shadow(6px 6px 20px gray);
    
19.         cursor: pointer;
    
20.         transform: rotate3d(0, 0.3, 0, 0);
    
21.         animation: rot3d 4s linear infinite var(--state);
    
22.         --state: running;
    
23.     }
    
24.     .sdiv:hover {
    
25.         filter: drop-shadow(6px 6px 40px black) hue-rotate(130deg);
    
26.         --state: paused;
    
27.     }
    
28.     @keyframes rot3d { to { transform: rotate3d(0, 0.3, 1, 360deg); } }
    
29. </style>
    
30. 
    
31. <div class="wrapper">
    
32.     <div class="sdiv"></div>
    
33. </div>

复制代码

花飞飞

CSS完成小花的3D运动，角度变化形成立体效果。。
这个感觉好明显，鼠标不能控制大小了。也不能扯着它底朝天了。。就是跟JS的区别么

花飞飞

transform: rotate3d(0, 0.3, 0, 0);
transform: rotate(var(--deg)
两者转动设置的差别
3D转动头一回看到rot3d

杨帆

漂亮，谢谢老师精彩分享

红影

这个开始就设定了景深，然后用纯css实现了三维旋转呢

马黑黑

红影 发表于 2025-7-5 21:55
这个开始就设定了景深，然后用纯css实现了三维旋转呢

是的

马黑黑

花飞飞 发表于 2025-7-5 21:19
CSS完成小花的3D运动，角度变化形成立体效果。。
这个感觉好明显，鼠标不能控制大小了。也不能扯着它底朝 ...

但是CSS是最节流的

红影

旋转角度从0撞到360可以理解，z轴从0变到1是起什么作用的？

马黑黑

红影 发表于 2025-7-5 21:58
旋转角度从0撞到360可以理解，z轴从0变到1是起什么作用的？

这是对应xyz轴的向量数据，每一个一般从0到1，你可以尝试一下静态的，一次将它们设置为不同的数，一个一个来，其余的都是0

马黑黑

杨帆 发表于 2025-7-5 21:36
漂亮，谢谢老师精彩分享

梦江南

谢谢黑黑老师精彩分享。早上好！

马黑黑

梦江南 发表于 2025-7-6 07:32
谢谢黑黑老师精彩分享。早上好！

花飞飞

马黑黑 发表于 2025-7-5 21:56
但是CSS是最节流的

JS在节流方面不如CSS？感觉JS各方面都很强悍的呀。。

红影

马黑黑 发表于 2025-7-5 21:56
是的

三维的就是好看，这个制作太棒了

红影

马黑黑 发表于 2025-7-5 22:00
这是对应xyz轴的向量数据，每一个一般从0到1，你可以尝试一下静态的，一次将它们设置为不同的数，一个一 ...

嗯嗯，黑黑说得对，需要一个向量一个向量地测试，才能知道实际效果。

马黑黑

红影 发表于 2025-7-6 12:27
三维的就是好看，这个制作太棒了

三维好看是因为三维的才是符合自然的本质

马黑黑

红影 发表于 2025-7-6 12:29
嗯嗯，黑黑说得对，需要一个向量一个向量地测试，才能知道实际效果。

不过，一般的建议是，rotate36(x, y, z, a) 用于一次性定姿势的时候，如果设计一个3d旋转动画，还是使用 rotateX、rotateY、rotateZ 作为 transform 的组合属性值来实现较好。

马黑黑

花飞飞 发表于 2025-7-6 08:38
JS在节流方面不如CSS？感觉JS各方面都很强悍的呀。。

CSS可以认为是不怎么消耗资源的，因为，浏览器直接支持渲染CSS设置的东东，不用运算；JS所有的代码在执行的时候都通过一个引擎去编译，然后在通过浏览器对CSS、HTML的预处理重新渲染页面，即消耗计算机算力，又额外花时间去处理。

红影

马黑黑 发表于 2025-7-6 12:37
三维好看是因为三维的才是符合自然的本质

是的，我们的真实世界本来就是三维的。