🎄

CSSで3Dのクリスマスツリーを作ろう

2024/12/24に公開

CSS

HTML

tech

CSSのtransform-style: preserve-3dを利用すると要素を3D空間に配置することができます。
これを使ってクリスマスにモミの樹を立てましょう。

clip-pathを使って三角形の要素を作り、それを幹の周りに並べていきます。
transform-origin: bottomを指定することによりtransformの基準点を木の中心にして各面の位置を計算しやすくしています。

<div class="tree">
    <div class="leaves top">
        <div class="leaf-1"></div>
        <div class="leaf-2"></div>
        <div class="leaf-3"></div> 
        <div class="leaf-4"></div>
    </div>
    ...
    <div class="trunk">
        <div class="bark-1"></div>
        <div class="bark-2"></div>
        <div class="bark-3"></div> 
        <div class="bark-4"></div>
    </div>
</div>

.tree {
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 5s linear infinite;
}
.leaf-1,
.leaf-2,
.leaf-3,
.leaf-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 346.41px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform-origin: bottom;
}
.leaf-1 {
  transform: rotateY(0deg) rotateX(35.3deg) translateZ(245px);
}
.leaf-2 {
  transform: rotateY(90deg) rotateX(35.3deg) translateZ(245px);
}
...

できました。

色味が味気ないので、表面にテクスチャ感を出しましょう。
linear-gradientを利用します。

.leaf-1,
.leaf-2,
.leaf-3,
.leaf-4 {
  background: linear-gradient(#629584, #214035);
  ...
}

できました。雰囲気が出ましたね。

クリスマス感がないので、飾りつけをしていきましょう。
:before, :after要素を使っていきます。

.top .leaf-1::before {
  content: "🟠";
  position: absolute;
  top: 200px;
  left: 200px;
  opacity: 1;
  font-size: 32px;
}

できました。いいツリーになったと思います。

メリークリスマス！フォッフォッフォ…

X (Twitter): @koyo_k0

Discussion