.trigo {
	height:200px;
	transform: perspective(1000px) rotate3D(0,1,0,-30deg);
	transition: all 300ms linear;
}
.trigo:hover { transform: perspective(1000px) rotate3D(0,1,0,0deg); }
.trigo:before {
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
    box-shadow: 6px 6px 20px 5px grey;
    background: gray;
    background: linear-gradient(15deg, gray, transparent);
    -webkit-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    transform: perspective(1000px) rotate3D(-1,0,0,-70deg) skew(-20deg,0) scale(.33,.5);
    transition: all 300ms linear;
    transform-origin: 54% 85%;
    opacity: .5;
}
.trigo:hover:before { perspective(1000px) rotate3D(-1,0,0,-60deg) skew(-20deg,0) scale(.33,.5) }


.triglon {
    width: 100px;
    height: 100px;
    overflow:hidden;
    text-align: center;
	display: inline-block;
	transition: all 300ms linear;
    transform-origin: 50% 90%;
    margin-left: -50px;
}
.triglon:nth-child(3n),
.triglon:nth-child(3n-1) { z-index:1; }

.triglon:nth-child(2) { transform: rotate(60deg) scale(.75,.75); }
.triglon:nth-child(2):hover { transform: rotate(60deg) rotateY(40deg) }

.triglon:nth-child(3) { transform: rotate(120deg) scale(.75,.75); }
.triglon:nth-child(3):hover { transform: rotate(120deg) rotateY(40deg) }

.triglon:nth-child(4) { transform: rotate(180deg); }

.triglon:nth-child(5) { transform: rotate(240deg) scale(.75,.75); }
.triglon:nth-child(5):hover { transform: rotate(240deg) rotateY(40deg) }

.triglon:nth-child(6) { transform: rotate(300deg) scale(.75,.75); }
.triglon:nth-child(6):hover { transform: rotate(300deg) rotateY(40deg) }


.triglon q {
	display:inline-block;
	position:relative;
	overflow:hidden;
	height: 100%;
	width: 100%;
}
.triglon q + q {
	left: -94%;
    height: 82%;
    width: 82%;
    top: -13%;
}
.triglon q + q s s {
	background:rgba(240,240,240,1);
}
.triglon q:after, .triglon q:before {
	content:'';
}

.triglon q s,
.triglon q s > a {
	display:inline-block;
	position:relative;
	width: 100%;
	height: 100%;
}

.triglon q > s {
	overflow: hidden;
	transform-origin: 100% 0;
	transform: rotate(30deg);
}
.triglon q > s > s {
	transform-origin: 100% 100%;
	transform: rotate(30deg);
	overflow:hidden;
}
.triglon q s > a {
    transform: rotate(30deg);
    border-left: silver 3px solid;
    transform-origin: 0% 180%;
}
.triglon:nth-child(3n-1) q s > a {
    transform: rotate(-30deg);
    border-right: silver 3px solid;
    transform-origin: 120% 180%;
}

.triglon q:before,
.triglon q s:before {
	display:block;
	top:0;bottom:0;
	left:0;right:0;
	position:absolute;
	border: transparent 3px solid;
	pointer-events: none;
	z-index:1;
}
.triglon q:before {
	content:'';
	border-top : 3px silver solid;
}
.triglon q > s:before {
	content:'';
	border-right: 3px silver solid;
}
.triglon q > s > s:before {
	content:'';
	border-bottom: 3px silver solid;
}

.triglon:nth-child(3n-2) q:first-child:before {
	border-top-color: gray;
}
.triglon:nth-child(3n-2) q:first-child > s:before {
	border-right-color: gray;
}
.triglon:nth-child(3n-2) q:first-child > s > s:before {
	border-bottom-color: gray;
}


.triglon q a { cursor:pointer; background: red; }
.triglon q a:hover { background: darkred; }