马黑黑 发表于 2025-7-5 21:02

纯CSS 3d旋转的小播

<style>
    .wrapper {
      margin: 30px auto;
      width: 740px;
      height: 460px;
      border: 1px solid gray;
      display: grid;
      place-items: center;
      perspective: 1000px;
      position: relative;
    }
    .sdiv {
      position: absolute;
      width: 200px;
      height: 200px;
      background: url('https://638183.freep.cn/638183/small/ytji_133877216020393750.png') no-repeat center/cover;
      filter: drop-shadow(6px 6px 20px gray);
      cursor: pointer;
      transform: rotate3d(0, 0.3, 0, 0);
      animation: rot3d 4s linear infinite var(--state);
      --state: running;
    }
    .sdiv:hover {
      filter: drop-shadow(6px 6px 40px black) hue-rotate(130deg);
      --state: paused;
    }
    @keyframes rot3d { to { transform: rotate3d(0, 0.3, 1, 360deg); } }
</style>

<div class="wrapper">
    <div class="sdiv"></div>
</div>

马黑黑 发表于 2025-7-5 21:03

代码：


<style>
    .wrapper {
      margin: 30px auto;
      width: 740px;
      height: 460px;
      border: 1px solid gray;
      display: grid;
      place-items: center;
      perspective: 1000px;
      position: relative;
    }
    .sdiv {
      position: absolute;
      width: 200px;
      height: 200px;
      background: url('https://638183.freep.cn/638183/small/ytji_133877216020393750.png') no-repeat center/cover;
      filter: drop-shadow(6px 6px 20px gray);
      cursor: pointer;
      transform: rotate3d(0, 0.3, 0, 0);
      animation: rot3d 4s linear infinite var(--state);
      --state: running;
    }
    .sdiv:hover {
      filter: drop-shadow(6px 6px 40px black) hue-rotate(130deg);
      --state: paused;
    }
    @keyframes rot3d { to { transform: rotate3d(0, 0.3, 1, 360deg); } }
</style>

<div class="wrapper">
    <div class="sdiv"></div>
</div>

花飞飞 发表于 2025-7-5 21:19

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

花飞飞 发表于 2025-7-5 21:22

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

杨帆 发表于 2025-7-5 21:36

漂亮，谢谢老师精彩分享{:4_191:}

红影 发表于 2025-7-5 21:55

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

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

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

是的

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

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

但是CSS是最节流的

红影 发表于 2025-7-5 21:58

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

马黑黑 发表于 2025-7-5 22:00

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

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

马黑黑 发表于 2025-7-5 22:00

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

{:4_190:}

梦江南 发表于 2025-7-6 07:32

谢谢黑黑老师精彩分享。早上好！{:4_190:}

马黑黑 发表于 2025-7-6 08:03

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

{:4_191:}

花飞飞 发表于 2025-7-6 08:38

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

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

红影 发表于 2025-7-6 12:27

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

三维的就是好看，这个制作太棒了{:4_187:}

红影 发表于 2025-7-6 12:29

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

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

马黑黑 发表于 2025-7-6 12:37

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

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

马黑黑 发表于 2025-7-6 12:39

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

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

马黑黑 发表于 2025-7-6 12:42

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

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

红影 发表于 2025-7-6 16:20

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

是的，我们的真实世界本来就是三维的。
页: [1] 2 3 4 5
查看完整版本: 纯CSS 3d旋转的小播