<div class="cube">
  <div class="surface front">front</div>
  <div class="surface right">right</div>
  <div class="surface left">left</div>
  <div class="surface top">top</div>
  <div class="surface bottom">bottom</div>
  <div class="surface back">back</div>
</div>

body {
  width: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  perspective: 200px;
	-webkit-perspective: 200px;
}

.cube {
  width: 1px;
  height: 1px;
	margin: 100px auto;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
	border: 5px solid red;
  position: relative;
}

.surface {
	width: 100px;
  height: 100px;
	background: rgba(255, 0, 0, 0.1);
	border: 2px solid gray;
  position: absolute;
  left: calc(-100px / 2);
  top: calc(-100px / 2);
  text-align: center;
  line-height: 100px;
}

/* 面個別CSS */
.front {
   transform:
    translateZ(calc(100px / 2));
  -webkit-transform:
    translateZ(calc(100px / 2));
}
.back {
  transform:
   translateZ(calc(-100px / 2)) rotateY(180deg);
  -webkit-transform:
   translateZ(calc(-100px / 2)) rotateY(180deg);
}
.right {
  transform: 
    translateX(calc(100px / 2)) rotateY(90deg);
  -webkit-transform: 
    translateX(calc(100px / 2)) rotateY(90deg);
}
.left {
  transform:
    translateX(calc(-100px / 2)) rotateY(-90deg);
  -webkit-transform:
    translateX(calc(-100px / 2)) rotateY(-90deg);
}
.top{
  transform:
    translateY(calc(-100px / 2)) rotateX(90deg);
  -webkit-transform:
    translateY(calc(-100px / 2)) rotateX(90deg);
}
.bottom{
  transform:
   translateY(calc(100px / 2)) rotateX(-90deg) ;
  -webkit-transform:
   translateY(calc(100px / 2)) rotateX(-90deg) ;
}