Windows 8 logo in CSS3


Windows 8 logo with window animation created in 5 minutes with the help of CSS3


Windows 8

HTML

<div class="window"></div>
<div class="logo_text">Windows 8</div>

CSS

.window {
	position: relative; 
	float: left;
	margin-left: 50px;
	width: 200px; 
	height: 150px;
	background: #00adef;
	-webkit-transform: perspective(400px) rotateY(-25deg);
	   -moz-transform: perspective(400px) rotateY(-25deg);
	    -ms-transform: perspective(400px) rotateY(-25deg);
	     -o-transform: perspective(400px) rotateY(-25deg);
	        transform: perspective(400px) rotateY(-25deg);
	-webkit-animation: windows_animation 5s infinite;
	   -moz-animation: windows_animation 5s infinite;
	    -ms-animation: windows_animation 5s infinite;
}
.window::after, .window::before {
	content: '';
	background: #fff;
	height: 100%; width: 10px;
	left: 50%;
	margin-left:-5px;
	top:0;
	position: absolute;
}
.window::before {
	left: 0;
	top: 50%;
	margin-top: -5px;
	margin-left: 0;
	height: 10px;
	width: 100%;
	position: absolute;
}
.logo_text {
	color: #00adef;
	line-height: 150px;
	font-size: 130px;
	padding-left: 20px;
	float: left;
}

An here is the animation:


CSS

@-webkit-keyframes windows_animation {
	0%, 100% { 
		-webkit-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-webkit-transform: perspective(400px) rotateY(-35deg);
	}
}
@-moz-keyframes windows_animation {
	0%, 100% { 
		-moz-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-moz-transform: perspective(400px) rotateY(-35deg);
	}
}
@-ms-keyframes windows_animation {
	0%, 100% { 
		-ms-transform: perspective(400px) rotateY(-25deg);
	}
	50% {
		-ms-transform: perspective(400px) rotateY(-35deg);
	}
}

blog comments powered by Disqus