<div class="container">
	<div class="box">
		<div class="side_top">
			<div class="vuejs">Vue.js</div>
			<div class="vuejs">Vue.js</div>
			<div class="vuejs">Vue.js</div>
			<div class="vuejs">Vue.js</div>
			<div class="vuejs">Vue.js</div>
			<div class="vuejs">Vue.js</div>
		</div>
			
		<div class="side_front">
			<div class="triangle green">
				<div class="triangle blue"></div>
				<div class="triangle white"></div>
			</div>
		</div>
			
		<div class="side_back">
			<div class="triangle green">
				<div class="triangle blue"></div>
				<div class="triangle white"></div>
			</div>
		</div>
			
		<div class="side_left">
			<div class="triangle green">
				<div class="triangle blue"></div>
				<div class="triangle white"></div>
			</div>
		</div>
			
		<div class="side_right">
			<div class="triangle green">
				<div class="triangle blue"></div>
				<div class="triangle white"></div>
			</div>
		</div>
	</div>
</div>
	
<!--This Is Not Part Of Vue.js 3D Logo-->
<a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="blank_">
	<span>My Pens List</span>
</a>
@charset "utf8";

@import url('https://fonts.googleapis.com/css?family=Dosis:500');

/*                                             ! Vue.js 3D Logo Started Here ...
=======================================================================================================================*/
*,
*:after,
*:before,
html
	{box-sizing:border-box}

body{
	margin:0;
	padding:0;
	font-style:normal;
	text-align:center;
	overflow:hidden
	}

div{display:block;position:absolute}

.container{
	width:250px;
	height:250px;
	top:50%;
	left:50%;
	perspective:100%;
	transform:translate(-50%,-50%)
	}

.box,
[class*="side"]
	{width:100%;height:100%;transform-style:preserve-3d}

.box{animation:rotation 20s linear infinite}

.side_top
	{top:50px;transform:rotateX(90deg) translate3d(0,0,125px)}

.vuejs,
.vuejs:before,
.vuejs:after{
	background:linear-gradient(0deg,#729CC9,#35495e 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	width:100%;
	height:100%;
	top:0;
	left:0;
	font-family:'Dosis',sans-serif;
	font-size:80px;
	font-weight:700;
	letter-spacing:5px
	}

.vuejs{transform-style:preserve-3d}

.vuejs:nth-child(1){transform:rotateX(-90deg) translate3d(0,0,8px)}
.vuejs:nth-child(2){transform:rotateX(-90deg) translate3d(0,0,5px)}
.vuejs:nth-child(3){transform:rotateX(-90deg) translate3d(0,0,2px)}
.vuejs:nth-child(4){transform:rotateX(-90deg) translate3d(0,0,-1px)}
.vuejs:nth-child(5){transform:rotateX(-90deg) translate3d(0,0,-4px)}
.vuejs:nth-child(6){transform:rotateX(-90deg) translate3d(0,0,-7px)}

.vuejs:before,
.vuejs:after
	{content:"Vue.js";display:block;position:absolute}

.vuejs:before{transform:translate3d(0,0,-1px)}
.vuejs:after{transform:translate3d(0,0,-2px)}

.side_front{transform:translate3d(0,0,125px)}
.side_back{transform:rotateY(180deg) translate3d(0,0,125px)}
.side_left{transform:rotateY(-90deg) translate3d(0,0,125px)}
.side_right{transform:rotateY(90deg) translate3d(0,0,125px)}

.triangle
	{clip-path:polygon(50% 50%,100% 50%,50% 100%,0 50%)}

.green{
	background:linear-gradient(45deg,#143828,#42b883 100%);
	width:100%;
	height:200%;
	bottom:-30px;
	transform:rotateX(-30deg)
	}

.blue,
.white
	{left:50%;transform:translate(-50%,0)}

.blue{
	background:#35495e;
	width:80%;
	height:80%;
	top:0
	}

.white{
	background:#fff;
	width:30%;
	height:30%;
	top:155px
	}

@keyframes rotation{
	0%{transform:rotateY(0deg)}
	100%{transform:rotateY(360deg)}
	}
/*                                             ! Vue.js 3D Logo Ended Here ...
=======================================================================================================================*/

/* This Is Not Part Of Vue.js 3D Logo */
.me{
	background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1735448/profile/profile-80.jpg?1528976396")no-repeat center / contain;
	width:40px;
	height:40px;
	bottom:16px;
	right:16px;
	display:block;
	position:fixed;
	border-radius:50%;
	z-index:999;
	animation:me 2s linear infinite alternate
	}

@keyframes me{
	from{transform:translateY(-4px)}
	to{transform:translateY(4px)}
	}

.me:hover span
	{right:50px;opacity:1;visibility:visible}

.me span{
	width:150px;
	top:10px;
	right:0;
	display:block;
	position:absolute;
	color:#008080;
	font-family:Tahoma,Geneva,sans-serif;
	font-size:16px;
	font-weight:400;
	z-index:-1;
	opacity:0;
	visibility:hidden;
	transition:all .5s ease
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.