.all
	.con
		.rainbow
			- 6.times do
				.panel
		

		.logo
			%p Learnosity 
View Compiled
body, html {
	margin:0;
	padding:0;
	background:#43403A;
}

.all {
	transform-style: preserve-3d;
	transform: scale(0.6);
	margin-top:0px;
}

.con {
	width:100%;
	height:400px;
	//border:1px solid red;

	transform-style: preserve-3d;
	transform: rotateX(0deg);
}

.logo {
	width:70%;
	height:100%;
	float:right;
	//border:1px solid blue;
	font-family: 'Roboto Slab', serif;
	font-size:200px;
	color:white;
	margin-top:-190px;
}

.rainbow {
	float:left;
	width:30%;;
	height:100%;
	//border:1px solid green;
	transform-style: preserve-3d;
	transform:rotateY(180deg) rotateX(-10deg);
	//animation: rotate 2s ease 1;
	//animation-delay:0.5s;
	
}

@keyframes rotate {
	0% {
		transform: rotateY(180deg) rotateX(-10deg);;
	}
	
	90% {
		transform: rotateY(180 + 360*1 + 0deg) rotateX(-10deg);;
	}
	
	100% {
		transform: rotateY(180 + 360*1 + 0deg) rotateX(-10deg);;
	}
}

$seconds: 3s;

$colours: #E21D48, #eb1515, #ee413a, #fcc100, #ffdd36, #5bc0c6;

$wid: 0, 5, 30, 30, 5, 0;

$panels: 6;

@for $i from 1 through $panels {
	.panel:nth-child(#{$i}) {
		
		$inc: nth($wid, $i);
		
		@if($inc == 0) {
			border-radius: 0 10px 10px 0px;
		} @else {
			border-radius: 0 10px 0px 0px;
		}
		
		height:200px;
		width:160px + 1px * $inc*2;
		background-color:nth($colours, $i);
		position:absolute;
		
		transform:rotateY(($i - 1)*36deg);
		
		margin-left:200px;
		margin-top:50px;
		opacity:0.7;
		transform-origin: 0% 0%;
		animation: open-#{$i} $seconds ease 1;
		
		@if($inc != 0) {
			&:after {
			content:"";
			width: 0; 
			height: 0; 
			border-top: 10px solid transparent;
			transform:rotate(1deg);
			border-bottom: 40px + $inc solid transparent; 

			border-right:160px + $inc*2 solid nth($colours, $i);
			border-radius:10px;
			position:absolute;
			margin-top:190px;
			animation:  open-after-#{$i} $seconds ease 1;
			}
		}
		
	}
	
	$leftOrMiddle: 0deg; // 90 for middle, 0 for left
	
	@keyframes open-#{$i} {
		0%{
			transform:rotateY($leftOrMiddle);
			width:160px;	
		}
		
		10% {
			transform:rotateY($leftOrMiddle);
			width:160px;	
		}

		100% {
			transform:rotateY(($i - 1)*36deg);
		}
}
	
		@keyframes open-after-#{$i} {
			0% {
				border-right:160px solid nth($colours, $i);
				border-bottom: 5px solid transparent; 
				margin-top:180px;
			}
			
			10% {
				border-right:160px solid nth($colours, $i);
				border-bottom: 5px solid transparent; 
			}

			100% {
				
			}
		}
}

@media screen and (max-width: 1000px) {
	.logo {
		display: none;
	}
	
	.all {
		width:0px;
		margin: 0 auto;
	}
	
	.con {
		margin-left:200px;
		
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.