trszdev/cube_rotate.html

## cube_rotate.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>3D Cube rotate animation</title>
  <style>
    .global {
      background: yellow;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      width: 85%;
      height: 85%;
    }

    .container {
      perspective: 1000px;
      perspective-origin: 0 center;
    }

    .face, .face2 {
      font-size: 40px;
      color: white;
      transform-origin: top left;
      backface-visibility: hidden;
    }

    .face {
      width: 200px;
      height: 100px;
      background: red;
    }

    .face2 {
      right: 0;
      top: 50%;
      position: absolute;
      width: 200px;
      height: 300px;
      background: blue;
      transform: translateY(-50%) rotateY(90deg);
    }

    @keyframes spin {
      from { transform: rotateY(0); }
      to { transform: rotateY(-90deg); }
    }

    @keyframes spin2 {
      from { transform: translate(235px, -50%) rotateY(90deg); }
      to { transform: translate(0, -50%) rotateY(0deg); }
    }

    .spin {
      animation: spin 1s linear 1;
      animation-fill-mode: forwards;
    }

    .spin2 {
      animation: spin2 1s linear 1;
      animation-fill-mode: forwards;
    }

    .reverse {
      animation-direction: reverse;
    }
  </style>
</head>
<body>
  <div class="global">
    <div id="c" class="container">
      <div class="face spin reverse">1</div>
      <div class="face2 spin2 reverse">2</div>
    </div>
  </div>
  <script>
    var all = document.querySelectorAll('.reverse')
    var reversed = true
    var c = document.getElementById('c')

    setInterval(function() {
      all.item(0).className = reversed ? 'face spin' : 'face spin reverse'
      all.item(1).className = reversed ? 'face2 spin2' : 'face2 spin2 reverse'
      c.style.display = 'none'
      setTimeout(function() { c.style.display = '' }, 60)
      reversed = !reversed
    }, 3000)
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>3D Cube rotate animation</title>
	<style>
	.global {
	background: yellow;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 85%;
	height: 85%;
	}

	.container {
	perspective: 1000px;
	perspective-origin: 0 center;
	}

	.face, .face2 {
	font-size: 40px;
	color: white;
	transform-origin: top left;
	backface-visibility: hidden;
	}

	.face {
	width: 200px;
	height: 100px;
	background: red;
	}

	.face2 {
	right: 0;
	top: 50%;
	position: absolute;
	width: 200px;
	height: 300px;
	background: blue;
	transform: translateY(-50%) rotateY(90deg);
	}

	@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(-90deg); }
	}

	@keyframes spin2 {
	from { transform: translate(235px, -50%) rotateY(90deg); }
	to { transform: translate(0, -50%) rotateY(0deg); }
	}

	.spin {
	animation: spin 1s linear 1;
	animation-fill-mode: forwards;
	}

	.spin2 {
	animation: spin2 1s linear 1;
	animation-fill-mode: forwards;
	}

	.reverse {
	animation-direction: reverse;
	}
	</style>
	</head>
	<body>
	<div class="global">
	<div id="c" class="container">
	<div class="face spin reverse">1</div>
	<div class="face2 spin2 reverse">2</div>
	</div>
	</div>
	<script>
	var all = document.querySelectorAll('.reverse')
	var reversed = true
	var c = document.getElementById('c')

	setInterval(function() {
	all.item(0).className = reversed ? 'face spin' : 'face spin reverse'
	all.item(1).className = reversed ? 'face2 spin2' : 'face2 spin2 reverse'
	c.style.display = 'none'
	setTimeout(function() { c.style.display = '' }, 60)
	reversed = !reversed
	}, 3000)
	</script>
	</body>
	</html>