马黑黑 发表于 2023-2-20 22:48

瞧瞧这个

<style>
#mydiv {
        margin: 100px;
        width: 60px;
        height: 60px;
        background: lightblue;
        box-shadow: -10px -20px 30px navy inset;
        border-radius: 50%;
        position: relative;
}
#mydiv::before, #mydiv::after {
        --deg: 360deg;
        position: absolute;
        content: '';
        left: -40px;
        top: -40px;
        bottom: -40px;
        right: -40px;
        border: 6px dotted navy;
        border-radius: 50%;
        transform: perspective(1600px) rotateX(45deg) rotateY(15deg);
        animation: rot 8s linear infinite;
}
#mydiv::after {
        --deg: -360deg;
        left: -50px;
        top: -50px;
        right: -50px;
        bottom: -50px;
}
@keyframes rot {
        to { transform: perspective(1600px) rotateX(45deg) rotateY(15deg) rotateZ(var(--deg)); }
}
</style>

<div id="mydiv"></div>

马黑黑 发表于 2023-2-20 22:49

代码
<style>
#mydiv {
        margin: 100px;
        width: 60px;
        height: 60px;
        background: lightblue;
        box-shadow: -10px -20px 30px navy inset;
        border-radius: 50%;
        position: relative;
}
#mydiv::before, #mydiv::after {
        --deg: 360deg;
        position: absolute;
        content: '';
        left: -40px;
        top: -40px;
        bottom: -40px;
        right: -40px;
        border: 6px dotted navy;
        border-radius: 50%;
        transform: perspective(1600px) rotateX(45deg) rotateY(15deg);
        animation: rot 8s linear infinite;
}
#mydiv::after {
        --deg: -360deg;
        left: -50px;
        top: -50px;
        right: -50px;
        bottom: -50px;
}
@keyframes rot {
        to { transform: perspective(1600px) rotateX(45deg) rotateY(15deg) rotateZ(var(--deg)); }
}
</style>

<div id="mydiv"></div>

马黑黑 发表于 2023-2-20 22:53

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

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

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

醉美水芙蓉 发表于 2023-2-20 23:14

红影 发表于 2023-2-20 23:14

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

马黑黑 发表于 2023-2-20 23:15

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

貌似如此

马黑黑 发表于 2023-2-20 23:16

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

这个还木有与音乐关联

醉美水芙蓉 发表于 2023-2-20 23:19

马黑黑 发表于 2023-2-20 23:54

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

那倒是容易

梦油 发表于 2023-2-21 09:17

这个播放器挺有意思。

马黑黑 发表于 2023-2-21 12:12

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

这里它还不是播放控制器

梦油 发表于 2023-2-21 14:16

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

哦，知道了。

马黑黑 发表于 2023-2-21 18:12

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

{:4_190:}

红影 发表于 2023-2-21 21:40

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

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

马黑黑 发表于 2023-2-21 21:43

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

说得对

红影 发表于 2023-2-22 18:51

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

我已经试过了{:4_173:}

马黑黑 发表于 2023-2-22 19:33

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

试过的说的更有底气

红影 发表于 2023-2-22 20:55

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

作为效果还挺好看的{:4_173:}

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

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

挺好挺好

红影 发表于 2023-2-23 12:03

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

那是当然，黑黑带来的效果必须好{:4_199:}
页: [1] 2 3
查看完整版本: 瞧瞧这个