Template:模板樣式色塊圖/style.css

.tile-row{
	clear: left;
}
.tile-row.hex.even{
	margin-left: -52px;
}
.tile-cell{
	float: left;
	width: 50px;height: 50px;
}
.tile-cell.hex{
	float: left;
	margin: auto auto -29.85px 0;
	width: auto;height: auto;
}
.tile-cell.tri{
	float: left;
	margin-left: -60px;
	width: 0;height: 0;
	border-bottom: 104px solid transparent;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
}
.tile-cell.tri.inv{
	border-top: 104px solid transparent;
	border-bottom: none;
}
.outline .tile-cell{
	outline:2px #000 solid;
}
.gap .tri{
	margin-left: -55.5px;
}
.gap .tri:nth-child(1){
	margin-left: -68px;
	padding:2px 2px 2px 2px;
}
.gap .tri:nth-child(2){
	margin-left: -60px;
}
.tile-row .tri .center{
	position:relative;top:20px;left:-10px
}
.tile-row .inv .center{
	top:-110px;
}


.tile-cell.hex div:nth-child(1){
	width: 0;
	border-bottom: 30px solid; 
	border-bottom-color: inherit;
	border-left: 52px solid transparent;
	border-right: 52px solid transparent;
}
.tile-cell.hex div:nth-child(2){
	width: 104px;
	height: 60px;
}
.tile-cell.hex div:nth-child(3){
	width: 0;
	border-top: 30px solid;
	border-top-color:inherit;
	border-left: 52px solid transparent;
	border-right: 52px solid transparent;
}

.qrcode{
	background-color:white;
	border: 1px solid transparent;
}
.qrcode .F{ background-color  : #fff;}
.qrcode .T{ background-color  : #000;}
.qrcode td > span{width:8px;height:8px;}
.cube-main{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-top: 150px;
  transform: translateZ(-50px) rotateX(335deg) rotateY(335deg) rotateZ(0deg) translateZ(50px);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 2s linear;
}

@keyframes cube-spinby2 {
  from { transform: rotateX(335deg) rotateY(425deg) rotateZ(0deg); }
  to { transform: rotateX(335deg) rotateY(785deg) rotateZ(0deg); }
}

@keyframes cube-spin {
  from { transform: translateZ(-50px) rotateX(335deg) rotateY(425deg) rotateZ(0deg) translateZ(50px);}
  to{ transform: translateZ(-50px) rotateX(335deg) rotateY(785deg) rotateZ(0deg) translateZ(50px);}
}

.cube-main.animate{
  animation: cube-spin 5s infinite linear;
}

.cube-main.by2{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-top: 100px;
  transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  transform-style: preserve-3d;
  transform-origin: 20% 20%;
  transition: transform 2s linear;
}

.cube-main.by2.animate{
  animation: cube-spinby2 5s infinite linear;
}

.cube{
  opacity: 1;
  position: absolute;
  height: 100px;
  width: 100px;
}

.col, .row, .lvl{ transform-style: preserve-3d; }
.by2 .col1{ transform: translateX(-50px); }
.col2{ transform: translateX(100px); }
.col3{ transform: translateX(200px); }
.by2 .col3{ transform: translateX(50px); }

.row1{ transform: translateZ(-150px); }
.by2 .row1{ transform: translateZ(-50px); }
.row2{ transform: translateZ(-50px); }
.row3{ transform: translateZ(50px); }
.by2 .row3{ transform: translateZ(50px); }

.lvl1		{ z-index: 9; }
.by1 .lvl1	{ z-index: 9; transform: translateY(-100px) translateX(-100px); }
.by2 .lvl1	{ z-index: 9; transform: translateY(-50px); }
.lvl2		{ z-index: 8; transform: translateY(100px); }
.by1 .lvl2	{ z-index: 8; transform: translateX(-100px); }
.lvl3		{ z-index: 7; transform: translateY(200px);}
.by1 .lvl3	{ z-index: 7; transform: translateY(100px) translateX(-100px); }
.by2 .lvl3	{ z-index: 7; transform: translateY(50px); }

.cube .cube-front, .cube .cube-top, .cube .cube-bottom, .cube .cube-left, .cube .cube-right, .cube .cube-back{
  position: absolute;
  height: 60px;
  width: 60px;
  padding: 18px;
  border: 3px solid #000;
  border-radius: 5px;
}
.by1 .cube-front, .by1 .cube-top, .by1 .cube-bottom, .by1 .cube-left, .by1 .cube-right, .by1 .cube-back{height: 260px;width: 260px;}

.cube-front{ transform: translateZ(50px); z-index: 10;}
.cube-top{transform: rotateX(90deg) translateZ(50px); z-index: 10;}
.cube-bottom{transform: rotateX(-90deg) translateZ(50px);}
.cube-left{transform: rotateY(-90deg) translateZ(50px);}
.cube-right{transform: rotateY(90deg) translateZ(50px); z-index: 10;}
.cube-back{transform:  translateZ(-50px);}

.tile-grid .white, .cube .white{ background-color  : #fff;}
.tile-grid .yellow, .cube .yellow{ background-color  : yellow;}
.tile-grid .orange, .cube .orange{ background-color  : orange;}
.tile-grid .red, .cube .red{ background-color  : red;}
.tile-grid .green, .cube .green{ background-color  : green;}
.tile-grid .blue, .cube .blue{ background-color  : blue;}
.tile-grid .none, .cube .none{ background-color  : #777;}
.tile-grid .magenta, .cube .magenta{ background-color  : magenta;}
.tile-grid .lime, .cube .lime{ background-color  : lime;}
.tile-grid .cyan, .cube .cyan{ background-color  : cyan;}
.tile-grid .null, .cube .null{ background-color  : transparent;}
.tile-grid .black, .cube .black{ background-color  : #000;}