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

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

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

改善されたHTML構(gòu)造は次のとおりです。

<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;
}

：根 {
   - 詳細(xì)：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;
  國(guó)境左翼：5px; /*厚い境界の調(diào)整*/
  z-index：100;
}

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

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

マスクと厚い境界効果は、外側(cè)のキューブの部分表面の背景をnoneに設(shè)定し、 border-width屬性を調(diào)整することで簡(jiǎn)単に実現(xiàn)できます。內(nèi)側(cè)キューブのサイズと位置は、必要に応じて調(diào)整できます。この方法は、期待を満たすWebpackロゴ効果を効果的に構(gòu)築します。