3DVG - test livres

In this example below you will see how to do a 3DVG - test livres with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nicolastilly, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nicolastilly ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3DVG - test livres</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">

<div id="bloc1"></div>
<div id="bloc2"></div>
<div id="bloc3"></div>
<div id="bloc4"></div>

<div id="cercle"></div>
	
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/nicolastilly/3dvg-test-livres-RxaopR */
body {
	overflow-x: hidden;
}

.wrapper {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 550px;
	height: 350px;
}

#bloc1 {
	width: 70px;
	height: 350px;
	background-color: black;
	position: absolute;
}

#bloc2{
	width: 70px;
	height: 350px;
	background-color: black;
	position: absolute;
	left:90px;
	z-index: 1;
}

#bloc3{
	width: 70px;
	height: 350px;
	background-color: black;
	position: absolute;
	left:180px;
	z-index: -1;
}

#bloc4{
	width: 70px;
	height: 350px;
	background-color: black;
	position: absolute;
	left:270px;
	z-index: 1;
   transform-origin: bottom right;
	 animation: bloc4 0.8s;
	transition: all 3.0s cubic-bezier(0.75, 0.25, 0.25, 0.75);
	animation-fill-mode: forwards;
}

@keyframes bloc4 {
  0% {
     transform: rotate(0deg);
  }
  100% {
     transform: rotate(90deg);
  }
}

#cercle {
	width: 130px;
	height: 130px;
	background-color: red;
	border-radius: 50%;
	position: absolute;
	left: 150px;
	top: 227px;
	 animation: vertical 1s linear;
	animation-fill-mode: forwards;
}

@keyframes vertical {
  0% {
     transform: translate(0, 0);
  }
  100% {
     transform: translate(1350px, 0);
  }
}

Comments