view source

JavaScript


  
CSS

  
.dice {
  display:block;
  position:relative;
  margin:25vmin auto 0;
  width:50vmin;
  height:50vmin;
  transform-style:preserve-3d;
  transform:rotateX(360deg) rotateY(360deg) rotateZ(720deg);
  animation:rotate-animation 3s linear infinite;
}

.dice .item {
  position:absolute;
  left:0;
  right:0;
  border: 1px solid #000;
  box-sizing:border-box;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,0.99);
  background-size:cover;
}

.dice .item:nth-child(1) {
  transform:translate3d(0, -25vmin, 0) rotateX(-90deg);
  background-image: url(dice-1.svg);
}

.dice .item:nth-child(2) {
  transform:translate3d(0, 0, 25vmin);
  background-image: url(dice-2.svg);
}

.dice .item:nth-child(3) {
  transform:translate3d(25vmin, 0, 0) rotateY(90deg);
  background-image: url(dice-3.svg);
}

.dice .item:nth-child(4) {
  transform:translate3d(-25vmin, 0, 0) rotateY(-90deg);
  background-image: url(dice-4.svg);
}

.dice .item:nth-child(5) {
  transform:translate3d(0, 0, -25vmin) rotateY(180deg);
  background-image: url(dice-5.svg);
}

.dice .item:nth-child(6) {
  transform:translate3d(0, 25vmin, 0) rotateX(-90deg);
  background-image: url(dice-6.svg);
}

@keyframes rotate-animation {
  from {
    transform:rotate3d(0);
  }

  to {
    transform:rotate3d(1, 1, 1, -360deg);
  }
}

  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-css-dice/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。