CSS3のシェーディングと厚い境界効果を備えたWebpackロゴの回転キューブを構築する方法は？

CSS3を使用して、マスキングと厚い境界効果を備えた回転するWebpackロゴキューブを構築する

この記事では、CSS3を使用して、マスキングと厚い境界効果を備えた2つのレイヤーを含む2つのレイヤーを含むクールなWebpackロゴ回転キューブを構築する方法について詳しく説明しています。予想される結果をより効果的に達成するために、初期コード構造を改善します。

最初のスキームは、擬似要素の::beforeと::afterキューブを作成しようとしましたが、回転とマスキング効果の観点からは欠点がありました。これは、擬似要素が3次元の立方体を構築するのに理想的ではないためです。より良い解決策は、使用することです<div>要素はキューブの6つの顔を表し、CSS3の<code>transform-style: preserve-3d;属性、およびrotateX 、 rotateY 、 translateZなどのプロパティは、3次元の回転と位置付けを実現します。内側のキューブは、サイズと位置を調整することにより、外側キューブのマスキング効果を実現します。厚い境界線は、各面のborder-width属性を設定することで達成されます。

改善されたHTML構造は次のとおりです。

<div class="cube outer">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
  <div class="face left"></div>
  <div class="face right"></div>
  <div class="cube inner">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
  </div>
</div>

対応するCSSスタイル：

体 {
  背景：＃2b3a42;
}

：根 {
   - 詳細：50px;
}

.cube {
  幅：100px;
  高さ：100px;
  位置：相対;
  変換スタイル：preserve-3d;
  変換：翻訳（-50％、-50％）rotatex（-35deg）rotatey（-135deg）translatez（var（ - 深さ））;
  位置：絶対;
  トップ：50％;
  左：50％;
}

。顔 {
  位置：絶対;
  幅：100px;
  高さ：100px;
  ボックスサイズ：ボーダーボックス;
  z -index：-1;
}

。フロント {
  変換：translatez（var（ -  dept））;
}

。戻る {
  変換：rotatey（180deg）translatez（var（ -  dept））;
}

.top {
  変換：rotatex（90deg）translatez（var（ -  dept））;
}

。底 {
  変換：rotatex（-90deg）translatez（var（ -  dept））;
}

。左 {
  変換：rotatey（-90deg）translatez（var（ -  dept））;
}

。右 {
  変換：rotatey（90deg）translatez（var（ -  dept））;
}

.outer> .face {
  背景：＃75AFCC;
  ボーダー：1px固体白。
}

.outer> .back、.outer> .top、.outer> .right {
  背景：なし;
  境界線：0.5px;
  境界線幅：5px;
  境界線幅：5px;
  国境左翼：5px; /*厚い境界の調整*/
  z-index：100;
}

.inner {
  幅：50px;
  高さ：50px;
  変換：翻訳（-50％、-50％）;
}

.inner> .face {
   - 詳細：25px;
  幅：50px;
  高さ：50px;
  背景：＃5299C8;
}

マスクと厚い境界効果は、外側のキューブの部分表面の背景をnoneに設定し、 border-width属性を調整することで簡単に実現できます。内側キューブのサイズと位置は、必要に応じて調整できます。この方法は、期待を満たすWebpackロゴ効果を効果的に構築します。