【我的前端】前端项目小练习：CSS创建3D圆柱旋转效果

前端项目小练习：CSS创建3D圆柱旋转效果

💖💖💖💕💕💕欢迎来到本博客💕💕💕💖💖💖

🎁支持：如果觉得博主的文章写得还说得过去或者博客对您有帮助的话，可以关注一下博主，如果三连收藏支持就更好啦！这就是给予我最大的支持！

🎉🎉Welcome to my blog!🎉🎉

📃个人CSDN博客主页：热爱科技的刘同学🌈🌈🌈

学习css，我们必须模仿圆柱体，因为我们没有用于圆形物体的css原生盒子。

就我自己的想法而言，我将添加很多我们彼此倾斜的侧面板。这将模仿我们正在寻找的 3D 效果。

HTML标记

我选择在 Pug 中进行演示。模拟 HTML 很容易，因为它可以使用变量。

但是，归结为以下 HTML 输出。

<div class="holder">
    <div class="cylinder">
        <div class="face" style="--index: 0">div>
        <div class="face" style="--index: 1">div>
    div>
div>
1
2
3
4
5
6

我们添加了支架包装纸，这样我们就可以把它放在一个不会干扰到圆柱体的角度了。

我已将以下类添加到支架以实现倾斜外观。

.holder {
    transform-style: preserve-3d;
    transform: rotateX(-35deg);
}
1
2
3
4

样式化 CSS 3D 圆柱体

在开始之前，我们需要定义一些变量，因为这需要一些计算能力。

我想在这里使用 scss，因为它更容易与变量一起使用。

在css 中添加以下变量。

$pi: 3.14159265358979;
$cylinder-width: 100vm;
$face-count: 50;
$face-deg: (360deg / $face-count);
$face-width: ($cylinder-width / $face-count);
$face-shift: ($cylinder-width / $pi / 2)
1
2
3
4
5
6

让我们来把每一个都解读清楚：

• pi：匹配PI，我们得计算一个完美的圆位移大小；
• cylinder-width：我们的圆柱宽度；
• face-count：这里指的是我们渲染了多少张脸。这应该与刚刚添加的 div 数量匹配；
• face-deg：每张脸要覆盖多大的度数；
• face-width：每个面的宽度；
• face-shift：我们需要将面向外移动以使其具有更多的 3D 效果。

现在我们可以移动到圆柱体的形状了。

.cylinder {
    position: relative;
    height: 50vw;
    width: $cylinder-width;
    transform-style: present-3d;
}
1
2
3
4
5
6

把以上代码添加到CSS文件中去可能会报错，不过没关系，不用管它。

这里没有什么特别的，但它基本上会包含我们圆柱体侧面的包装。

然后我们可以移动到每张脸，共享相同的模式。

.face {
    position: absolute;
    background-color: #da0060;
    opacity: 0.7;
    height: 100%;
    width: $face-width;
    top: 50%;
    left: 50%;
    transform-style: rotateY(calc(#{$face-dog} * var(--
index)))translateZ(
        clac(#{$face-shift}--6px)
    );
}
1
2
3
4
5
6
7
8
9
10
11
12
13

注意：0.7来自360度/50 (面)

translateZ是将每个项目向后多堆一点儿，使其看起来更加整洁、空间更大。

我还决定给一张脸上涂上不同的颜色，一面更好看的旋转。

.face {
    &:nth-child(1){
        background: purple;
    }
}
1
2
3
4
5

动画圆柱体

让我们添加一些动画来使圆柱体旋转。

@keyframes spin{
    to {
        transform: rotateY(-360deg);
    }
}

.cylinder {
    animation: spin 7s infinite linear;
}
1
2
3
4
5
6
7
8
9

这将使圆柱绕Y轴旋转360度。

您可以在此 CodePen 中看到结果。

💖别吃霸王餐💖

最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发💖💖💖。