Cube Design 1、8、27のアニメーションとcode解説・Copy も!!!

Codeは、のクリックでクリップボードにCopyできます。

Base Cube

Base Cube

Base Cube HTML

HTML欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

<div class="body_J1">
  <div class="cubeJs">
    <div class="cube_jx" data-cube="312">
    <!-- data-cube="312"自体のcss定義はアニメーションが不要な場合不要。但し、class="cube_jx"定義と data-cube=""の連携と、HTML上にdata-cube="312"が無いと側面が透明になる-->
      <div class="cube_jx-wrap">
        <div class="cube_jx-top">
          <div style="color:red;font-weight:900;">Top</div>
          <div></div>
          <!--div class="shadow-flip" data-cube="212">shadow-flipは、アニメーション無しの場合不要。</div-->
          <div></div>
          <!--div class="shadow-y" data-cube="212">shadow-yは、アニメーション無しの場合不要。</div-->
        </div>
        <div>底面</div>
        <!--div class="cube_jx-bottom">.cube_jx-bottom定義はアニメーション無しの場合底面は隠れる為不要。</div-->
        <div class="cube_jx-front-left degY180"><!-- class.degY180が無いと文字の角度つけ及び文字が表示されない。pタグ又は、aタグのclass定義、又はstyle定義でも無効。別途cssで定義 -->
          <div style="color:yellow;font-weight:900;">左側</div>
        </div>
        <div class="cube_jx-front-right degX180"><!-- degX180は、別途cssで定義  -->
          <div style="color:white;font-weight:900;">右側</div>
        </div>
        <div>左奥</div><!--div class="cube_jx-back-left"> .cube_jx-back-left はアニメーション無しの場合、背面左側は隠れてしまう為不要。</div-->
        <div></div><!--div class="cube_jx-back-right">.cube_jx-back-right はアニメーション無しの場合、背面右側は隠れてしまう為不要。</div-->
      </div>
    </div>
  </div>
</div>

Base Cube CSS

css欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

.body_J1 {
  width:100%;
  height:30vh; /*height:100vh;:100%;*/
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  background: linear-gradient(to bottom right, #a4c5c7, #2D3F48);
}

.cubeJs {
  width: 10vmin;
  height: 10vmin;
  transform: rotateX(60deg) rotateZ(-45deg);
  backface-visibility: visible;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 9000px;
}

.cube_jx {
  height: 10vmin;
  width: 10vmin;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  position: absolute;
  top: 0;
  left: 0;
}

.cube_jx-top {overflow: hidden;}
.cube_jx-top:before {
  background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  background-size: 2px 100%, auto;
  background-repeat: no-repeat;
}

.cube_jx-top:after {
  color: red;      /* HTML上のstyle定義が有効にならないため */
  font-weight:900; /* HTML上のstyle定義が有効にならないため  */
  content: "上面"; /* content: "上面";HTML上の定義が表示されないため必要 */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(3, 252, 206);/* 上面カラー変更#DFF4F0; */
}

.cube_jx-front-left {
  transform-origin: left center;
  transform: rotateY(90deg);
  overflow: hidden;
}

.cube_jx-front-left:before {
  background-image: linear-gradient(to bottom, var(--color-flx-top), var(--color-flx-bottom)),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 100% 100%, 1px 100%; /* 各グラデーションに対してサイズを指定 */
  background-repeat: no-repeat;
  background-position: 0 0, right 0; /* 各グラデーションの位置を指定 */
  transform-origin: center right; /* 変形の基準点を調整 */
}

.degY180{display:flex;}
.degY180>div{transform: rotateY(180deg)}

.cube_jx-front-right {
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

.cube_jx-front-right:before {
  background-image: linear-gradient(to right, var(--color-frx-top), var(--color-frx-bottom));
  transform-origin: top;
}

.degX180{display:flex;}
.degX180>div{transform: rotateX(180deg)}

.cube_jx[data-cube^="1"] {
  top: calc(-10vmin - 2px);
  --color-bgx-top: rgb(160, 235, 165);
  --color-bgx-bottom: rgb(137, 228, 181);
  --color-flx-top: rgb(78, 188, 151);
  --color-flx-bottom: rgb(67, 178, 119);
}
.cube_jx[data-cube^="2"] {
  --color-bgx-top: rgb(137, 228, 181);
  --color-bgx-bottom: rgb(118, 229, 159);
  --color-flx-top: rgb(67, 178, 119);
  --color-flx-bottom: rgb(61, 169, 124);
}
.cube_jx[data-cube^="3"] {
  top: calc(10vmin + 2px);
  --color-bgx-top: rgb(118, 229, 159);
  --color-bgx-bottom: rgb(99, 212, 165);
  --color-flx-top: rgb(61, 169, 124);
  --color-flx-bottom: rgb(67, 159, 59);
}
.cube_jx[data-cube^="11"], .cube_jx[data-cube^="21"], .cube_jx[data-cube^="31"] {
  left: calc(-10vmin - 2px);
  --color-frx-top: rgb(45, 95, 59);
  --color-frx-bottom: rgb(45, 99, 57);
}
.cube_jx[data-cube^="12"], .cube_jx[data-cube^="22"], .cube_jx[data-cube^="32"] {
  --color-frx-top: rgb(45, 99, 57);
  --color-frx-bottom: rgb(42, 98, 59);
}
.cube_jx[data-cube^="13"], .cube_jx[data-cube^="23"], .cube_jx[data-cube^="33"] {
  left: calc(10vmin + 2px);
  --color-frx-top: rgb(42, 98, 59);
  --color-frx-bottom: rgb(42, 103, 44);
}
.cube_jx[data-cube$="2"] {transform: translateZ(calc(10vmin + 2px));}
.cube_jx[data-cube$="3"] {transform: translateZ(calc(-10vmin - 2px));}

[class^=cube_jx-] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  top: 0;
  left: 0;
}
[class^=cube_jx-], 
[class^=cube_jx-]:before {
  will-change: transform;
  animation: any 4s infinite both;
}
[class^=cube_jx-]:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.cube_jx > .cube_jx-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
}

Cube Animation

Cube 1：アニメーション

Cube Animation HTML

HTML欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

<div class="body_J1">
  <div class="cubeJs">
    <div class="cube_jy" data-cube="312">
      <div class="cube_jy-wrap">
        <div class="cube_jy-top">
          <div style="color:red;font-weight:900;"><div>Top</div></div>
          <div class="shadow-flip" data-cube="312"></div>
          <div class="shadow-y" data-cube="312"></div>
        </div>
        <div class="cube_jy-bottom"></div>
        <div class="cube_jy-front-left degY180">
          <div style="color:yellow;font-weight:900;">Left</div>
        </div>
        <div class="cube_jy-front-right degX180">
          <div style="color:white;font-weight:900;">Right</div>
        </div>
        <div></div><!--div class="cube_jy-back-left"-->
        <div></div><!--div class="cube_jy-back-right"-->
      </div>
    </div>
  </div>
</div>

Cube Animation css

CSS欄にカーソルを置くと、
右上に現れる「」のクリックでクリップボードにCopyできます。

.body_J1 {
  width:100%;
  height:30vh; /*height:100vh;:100%;*/
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  background: linear-gradient(to bottom right, #a4c5c7, #2D3F48);
}
.cubeJs {
  width: 10vmin;
  height: 10vmin;
  transform: rotateX(60deg) rotateZ(-45deg);
  backface-visibility: visible;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 9000px;
}
.degX180{display:flex;}
.degX180>div{transform: rotateX(180deg)}
.degY180{display:flex;}
.degY180>div{transform: rotateY(180deg)}

@keyframes shadow_y_animation4s {
  to, 
  40%, 
  60%, 
  80%, 
  from {transform: translateY(-100%) scale(2, 0.75);}
  20%  {transform: scale(2, 1);}
}

@keyframes shadow_y_inverse_animation4s {
  to, 
  40%, 
  60%, 
  80%, 
  from {opacity: 0.9;transform: scale(2, 1);}
  20%  {opacity: 0;transform: translateY(-100%) scale(2, 0.75);}
}

@keyframes shadow_flip_animation4s {
  from, 
  20%, 
  40%, 
  50%, 
  to  {transform: rotate(90deg);}
  45% {transform: rotate(270deg);}
}

@keyframes shadow_flip_inverse_animation4s {
  from, 
  20%, 
  40%, 
  50%, 
  to  {transform: rotate(0deg);opacity: 0;}
  45% {transform: rotate(-180deg);opacity: 0.6;}
}

@keyframes shadow_z_animation4s {
  from,
  40%,
  60%,
  80%,
  to { 
    transform: scale(var(--shadow-x-scale), 2); 
  }
  20% { 
    transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(calc(var(--shadow-x-scale, 1) / 2), 2); 
  }
}

@keyframes shadow_z_inverse_animation4s {
  40%, 
  60% { 
    transform: translateX(var(--shadow-z-left)) translateY(var(--shadow-z-top)) scale(var(--shadow-x-scale, 1), 2); 
  }
  45% { 
    opacity: 0; 
  }
  from, 
  40%, 
  55% { 
    opacity: 0.5; 
  }
  to { 
    opacity: 1; 
  }
  from, 
  20%, 
  80%, 
  to { 
    transform: scale(2); 
  }
}

.cube_jy {
  height: 10vmin;
  width: 10vmin;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  position: absolute;
  top: 0;
  left: 0;
}
/*{表裏反転}*/
.cube_jy > .cube_jy-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transform-origin: center center -0.5vmin;
  will-change: transform;
  animation: animation4s 4s infinite both;
}
/*{表裏反転}*/
@keyframes animation4s  {
  from, 
  to, 
  20%, 
  60% {animation-timing-function: step-start;transform: none;}
  40% {transform: rotateY(-1turn);}
}

.cube_jy[data-cube^="1"] {
  top: calc(-10vmin - 2px);
  --color-bgx-top: rgb(160, 235, 165);
  --color-bgx-bottom: rgb(137, 228, 181);
  --color-flx-top: rgb(78, 188, 151);
  --color-flx-bottom: rgb(67, 178, 119);
}
/* クラスcube_jyを持ち、data-cube属性が「1」で始まる要素にスタイルを適用する
 [data-cube^="1"]: data-cube属性の値が「1」で始まる要素を選択。例えば、data-cube="123"やdata-cube="1abc"といった属性値が対象。
 top: calc(-10vmin - 2px);
 top: 要素の上からの位置を指定。要素の上部を-10vmin - 2pxの位置に配置。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
 --color-bgx-top: カスタムプロパティ（CSS変数）として、背景の上部の色を設定。値はrgb(160, 235, 165)。
 --color-bgx-bottom: 背景の下部の色を設定。値はrgb(137, 228, 181)。
 --color-flx-top: 前面の上部の色を設定。値はrgb(78, 188, 151)。
 --color-flx-bottom: 前面の下部の色を設定。値はrgb(67, 178, 119)。	
*/

.cube_jy[data-cube^="2"] {
  --color-bgx-top: rgb(137, 228, 181);
  --color-bgx-bottom: rgb(118, 229, 159);
  --color-flx-top: rgb(67, 178, 119);
  --color-flx-bottom: rgb(61, 169, 124);
}

.cube_jy[data-cube^="3"] {
  top: calc(10vmin + 2px);
  --color-bgx-top: rgb(118, 229, 159);
  --color-bgx-bottom: rgb(99, 212, 165);
  --color-flx-top: rgb(61, 169, 124);
  --color-flx-bottom: rgb(67, 159, 59);
}

.cube_jy[data-cube^="11"], .cube_jy[data-cube^="21"], .cube_jy[data-cube^="31"] {
  left: calc(-10vmin - 2px);
  --color-frx-top: rgb(45, 95, 59);
  --color-frx-bottom: rgb(45, 99, 57);
}
/*
  クラスcube_jyを持ち、data-cube属性が「11」、「21」、「31」で始まる要素にスタイルを適用
  [data-cube^="11"], [data-cube^="21"], [data-cube^="31"]: data-cube属性の値がそれぞれ「11」、「21」、「31」で始まる要素を選択。
  このセレクターによって、複数の条件に一致する要素に対して同じスタイルを適用。
  left: calc(-10vmin - 2px);
　left: 要素の左からの位置を指定。要素の左側を-10vmin - 2pxの位置に配置。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
　--color-frx-top: カスタムプロパティ（CSS変数）として、前面の上部の色を設定。値はrgb(45, 95, 59)。
　--color-frx-bottom: 前面の下部の色を設定。値はrgb(45, 99, 57)。
　このCSSは、クラスcube_jyを持ち、data-cube属性が「11」、「21」、「31」で始まる要素に対してスタイルを適用：
*/

.cube_jy[data-cube^="12"], .cube_jy[data-cube^="22"], .cube_jy[data-cube^="32"] {
  --color-frx-top: rgb(45, 99, 57);
  --color-frx-bottom: rgb(42, 98, 59);
}

.cube_jy[data-cube^="13"], .cube_jy[data-cube^="23"], .cube_jy[data-cube^="33"] {
  left: calc(10vmin + 2px);
  --color-frx-top: rgb(42, 98, 59);
  --color-frx-bottom: rgb(42, 103, 44);
}

.cube_jy[data-cube$="2"] {transform: translateZ(calc(10vmin + 2px));}
/*
  クラスcube_jyを持ち、data-cube属性が「2」で終わる要素にスタイルを適用.
  [data-cube$="2"]: data-cube属性の値が「2」で終わる要素を選択
  transform: translateZ(calc(10vmin + 2px));
  transform: 要素に2Dまたは3D変換を適用。
  translateZ(calc(10vmin + 2px)): 要素をZ軸方向（画面の奥行き方向）に移動させる。
  具体的には、10vminに2pxを加えた距離だけZ軸方向に移動。vminはビューポートの最小辺（幅か高さ）に対する割合を表す単位。
*/

.cube_jy[data-cube$="3"] {
  transform: translateZ(calc(-10vmin - 2px));
}

[class^=cube_jy-] {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  top: 0;
  left: 0;
}
/* cube_jy-で始まるすべての要素に対してスタイルを適用する
　[class^=cube_jy-]: クラス名がcube_jy-で始まるすべての要素を選択。例えば、cube_jy-frontやcube_jy-bottomなどが対象。
　　要素を絶対位置に配置し、親要素の左上隅に位置付け。
　　幅と高さを親要素の100%に設定。背面を表示するように設定。
 */
[class^=cube_jy-], 
[class^=cube_jy-]::before {
  will-change: transform;
  animation: any 4s infinite both;
}

[class^=cube_jy-]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
}

.cube_jy-top {
  overflow: hidden;
  animation-name: top_animation;/*アニメーション*/
}
/*{上面の縦方向縮小表示}*/
@keyframes top_animation {
  20% {transform: translateZ(calc(-10vmin + 2vmin));}
  40%, 
  60%, 
  80% {transform: none;}
}
.cube_jy-top::before, 
.cube_jy-top::after {will-change: transform;}

.cube_jy-top::before {
  background-image: linear-gradient(to bottom, #CBFEFF, transparent), linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  background-size: 2px 100%, auto;
  background-repeat: no-repeat;
}

.cube_jy-top::after {
  color: red;     /* HTML上のstyle定義が有効にならないため */
  font-weight:900;/* HTML上のstyle定義が有効にならないため  */
  content: "Top"; /* content:"上面";HTML上の定義が表示されないため*/
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(3, 252, 206);/* 上面カラー変更#DFF4F0; */
  animation: top_flash_animation4S 4s infinite both;
}
/*{Topフラッシュ}*/
@keyframes top_flash_animation4S {
  from, 
  50%, 
  60%, 
  to {opacity: 0;}
  52% {opacity: 0.9;}
}

.cube_jy-front-left {
  transform-origin: left center;
  transform: rotateY(90deg);
  overflow: hidden;
}

.cube_jy-front-left::before {
  background-image: linear-gradient(to bottom, var(--color-flx-top), var(--color-flx-bottom)),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 60%);
  background-size: 100% 100%, 1px 100%; /* 各グラデーションに対してサイズを指定 */
  background-repeat: no-repeat;
  background-position: 0 0, right 0; /* 各グラデーションの位置を指定 */
  transform-origin: center right; /* 変形の基準点を調整 */
  will-change: transform;
  animation-name: front_left_animation;
}
/*{前左側縮小表示}*/
@keyframes front_left_animation  {
  20% {transform: scaleX(0.2);}
  40%, 
  60% {transform: translateX(-8vmin) scaleX(0.2);}
  80% {transform: none;}
}

.cube_jy-front-right {
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

.cube_jy-front-right::before {
  background-image: linear-gradient(to right, var(--color-frx-top), var(--color-frx-bottom));
  transform-origin: top;
  will-change: transform;
  animation-name: front_right_animation;
}
/*{前右側縮小表示}*/
@keyframes front_right_animation  {
  20% {transform: scaleY(0.2);}
  40%, 
  60% {transform: translateY(8vmin) scaleY(0.2);}
  80% {transform: none;}
}

.cube_jy-bottom {
  transform: translateZ(-10vmin);
  background-image: linear-gradient(to bottom, var(--color-bgx-top), var(--color-bgx-bottom));
  animation-name: bottom_animation;
}
/*{bottomの表示}*/
@keyframes bottom_animation {
  from, 
  20%, 
  80%, 
  to  {transform: translateZ(calc(-10vmin + 1px)) scale(0.95);}
  40%, 
  60% {transform: translateZ(-2vmin) scale(0.95);}
}

.cube_jy-bottom::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DFF4F0;
  will-change: transform;
  animation: bottom_flash_animation4s 4s infinite both;
}
/*{bottomのフラッシュ}*/
@keyframes bottom_flash_animation4s {
  from, 
  40%, 
  50%, 
  to  {opacity: 0;}
  45% {opacity: 0.9;}
}
/* animation-delay: 248ms; */
.cube_jy[data-cube="312"] > .cube_jy-wrap, 
.cube_jy[data-cube="312"] > .cube_jy-wrap::before, 
.cube_jy[data-cube="312"] > .cube_jy-wrap::after, 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-], 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::before, 
.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::after {animation-delay: 248ms;}
.cube_jy[data-cube="312"] > .cube_jy-wrap [class^=shadow-] {animation-delay: 248ms;}
/* 特定の属性とクラスを持つ要素およびその子要素、さらにその擬似要素に対して、
   統一してアニメーション遅延適用。指定された要素のアニメーションが248ミリ秒遅れてから始まる。*/
/*
セレクターの部分
1.cube_jy[data-cube="312"] > .cube_jy-wrap
  classがcube_jyで、data-cube属性が312の要素の直下にある、.cube_jy-wrapの要素を選択。
2.cube_jy[data-cube="312"] > .cube_jy-wrap::before
  上記の要素の:::before擬似要素を選択。
3.cube_jy[data-cube="312"] > .cube_jy-wrap::after
  上記の要素の:::after擬似要素を選択。
4.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]
  上記の要素の子要素で、.cube_jy-で始まるすべての要素を選択。
5.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::before
  その中の:::before擬似要素を選択。
6.cube_jy[data-cube="312"] > .cube_jy-wrap > [class^=cube_jy-]::after
  その中の:::after擬似要素を選択。
*/

8 Cube’s

8 Cube’s

27 Cube’s

27 Cube’s

.gif画像とanimation.txtの合成

HTML

<div class="body-x tac">
<span class="text_background ta_c" style="font-size:200px;font-weight:bolder;">Cube</span>
</div>

css

.body-x {
  width: 900px; /* width:100%; */
  height: 800px; /* hight:100%;  height: 100vh; */
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://xn--ecka7j.biz/wp-content/uploads/2025/02/A1_w900-h800-5.64mb.gif");
 /*background-size:cover; 画像のサイズを指定、必要に応じて変更 */
 /*background-size:auto;  画像のサイズを実際のサイズにする */
  background-repeat: no-repeat; /* 繰り返しの有無を指定 */
  background-position: center center; /* 画像の位置を指定 */
}

.text_background {
    width:      100%;
    color: transparent;
    -webkit-background-clip: text;
    background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
  animation : rainbow_10s 10s linear infinite; }
@keyframes  rainbow_10s {
        0% { background-position: 0 0 }
    100% { background-position: 600px 0px } }
/* -webkit-が無いと、虹色グラデーションのみになる 2022/01/10 */