Pure CSS Animated Folder Icon

index.html

<label class="folder">
	<input type="checkbox"/>
	<span></span>
</label>

pure-css-animated-folder-icon.markdown

Pure CSS Animated Folder Icon

Pure CSS animated folder icon I created for an admin panel directory structure plugin.

Fully responsive - just change the width variable to see.

A Pen by Karl Saunders on CodePen.

License.

script.js

/* Just click the folder */

style.scss

$width: 150px;
$angle: -35deg;

@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

input {
	opacity: 0;
}

label {
	cursor: pointer;
}

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	font-family: 'Roboto';
	color: #111;
	@include flex-center;
}

.folder {
	position: relative;
	width: $width;
	height: calc(#{$width} / 100 * 75);
	perspective: $width * 5;
}

.folder span::before,
.folder span::after,
.folder::before,
.folder::after {
	position: absolute;
	content: "";
	border-radius: calc(#{$width} / 100 * 5);
}

.folder::before {
	width: 100%;
	height: 92%;
	bottom: 0;
	background-color: #cca352;
}

.folder span::after {
	width: 90%;
	height: 85%;
	bottom: 0;
	left: 5%;
	background-color: #fff;
	z-index: 2;
	transition: transform 250ms ease 0ms;
	transform: translate3d(0px, 0px, 0px);
}

.folder span::before {
	background-color: #ffcc66;
	width: 100%;
	height: 92%;
	bottom: 0;
	left: 0;
	z-index: 3;
	content: 'Click me...';
	transition: transform 500ms ease 0ms;
	transform-origin: 0 100% 0;
	outline: 1px solid transparent; /* Firefox anti-aliasing hack */	
	transform-style: preserve-3d;
	@include flex-center;
}

.folder::after {
	top: 0;
	left: 0;
	width: 40%;
	height: 50%;
	background-color: #cca352;
	z-index: 1;
}

.folder input:checked + span::before {
	transform: rotateX( $angle);
}
.folder input:checked + span::after {
	// transform: translate3d(0px, -10px, 0px) rotate(-3deg);
	// transition: transform 250ms ease 250ms;
	// box-shadow: 0 -2px 5px -2px rgba(0,0,0,0.4);
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500" rel="stylesheet" />