LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
		html, body {
			width:100%;
			height:100%;
			display:flex;
			justify-content: center;
		}

		.container {
			background-color: #005A97;
			width:200px;
			height:200px;
			border-radius:50%;
			display:flex;
			align-self: center;
		}

		.envelope {
			position: relative;
			align-self: center;
			margin: 0 auto;
			width: 100px;
			height: 75px;
			background-color: #94BDE5;
		}

		.container:hover {
			cursor: pointer;
		}

		.container:hover .moves {
		    transform: rotateX(180deg) translateY(50px);
      -webkit-transform: rotateX(180deg) translateY(50px);
      -ms-transform: rotateX(180deg) translateY(50px);
		    transition: .001s 0s;
		}

		.container:hover .letter {
			z-index:40;
			transform: translateY(-10px);
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);

		}

		.envelope-front {
			width: 100px;
			height: 75px;
			background-color: #94BDE5;
			position: absolute;
			z-index:50;
			-webkit-clip-path: polygon(50% 55%, 100% 1%, 100% 100%, 0 100%, 0 0);
			clip-path: polygon(50% 55%, 100% 1%, 100% 100%, 0 100%, 0 0);
		}

		.envelope-flap {
		  width: 0; 
		  height: 0; 
		  border-left: 50px solid transparent;
		  border-right: 50px solid transparent;
		  border-top: 50px solid #6393BF;
		  position: absolute;
		}

		.envelope-flap.moves {
			z-index:30;
			transition: .001s .45s;
		}

		.letter {
			height:60px;
			width:75px;
      display:block;
			background-color:#ffffff;
			position:absolute;
			left:12.5px;
			z-index:20;
			transition: all .5s ease-in-out;
		}
Term
Sat, 04/14/2018 - 20:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv