Pure CSS Physics Engine

In this example below you will see how to do a Pure CSS Physics Engine with some HTML / CSS and Javascript

CSS Physics Engine is actually not an engine! Because we can't make calculation in css. But it's like simulation of physics engine. The idea is very new so i am working on it. But this is very very early alpha version.

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

<head>
  <meta charset="UTF-8">
  <title>Pure CSS Physics Engine</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>CSSPE</h1>
		<span class='desc'>Pure CSS Physics Engine</span>
		<p>Use your mouse to raise the metal mass. Then mouse out from the green bordered area for release the mass.</p>

		<div id="walls" class="pe-wall">
			<div id="h1" class="pe-h-follower"></div>
			<div id="h2" class="pe-h-follower"></div>
			<div id="h3" class="pe-h-follower"></div>
			<div id="h4" class="pe-h-follower"></div>
			<div id="h5" class="pe-h-follower"></div>
			<div id="h6" class="pe-h-follower"></div>
			<div id="h7" class="pe-h-follower"></div>
			<div id="h8" class="pe-h-follower"></div>
			<div id="h9" class="pe-h-follower"></div>
			<div id="h10" class="pe-h-follower"></div>
			<div id="h11" class="pe-h-follower"></div>
			<div id="h12" class="pe-h-follower"></div>
			<div id="h13" class="pe-h-follower"></div>
			<div id="h14" class="pe-h-follower"></div>
			<div id="h15" class="pe-h-follower"></div>
			<div id="h16" class="pe-h-follower"></div>
			<div id="h17" class="pe-h-follower"></div>
			<div id="h18" class="pe-h-follower"></div>
			<div id="h19" class="pe-h-follower"></div>
			<div id="h20" class="pe-h-follower"></div>
			<span id="box" class="pe-box"></span>
		</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/coderontheroad/pure-css-physics-engine-qdgQrL */
/*
====================
STYLES SECTION
====================
*/
/* quick resets */
*{
	margin:0;
	padding:0;
}

/* structer styles */
h1{
	font-family: 'Helvetica','arial',sans-serif;
	font-size: 2em;
	color:#333;
	text-align: center;
	margin-top: 15px;
}

span.desc{
	display: block;
	font-family: 'Helvetica','arial',sans-serif;
	font-size: .9em;
	font-weight: bold;
	color:#666;
	text-align: center;
	margin-bottom: 15px;
}

p{
	display: block;
	font-family: 'Helvetica','arial',sans-serif;
	font-size: .8em;
	line-height: 1.4em;
	text-align: center;
	width: 400px;
	margin: 10px auto;
}

/* body graphics */
body{
	background: url('http://coderontheroad.com/imported/codepen/csspe/blue_shroom.png') 0 0 repeat-x;
}

/* wall graphics */
#walls{
	width: 400px;
	height: 340px;
	background: url('http://coderontheroad.com/imported/codepen/csspe/grass.png') bottom left repeat-x;
	margin: 0 auto;
}

/* box graphics */
#box{
	width: 70px;
	height: 70px;
	background: url('http://coderontheroad.com/imported/codepen/csspe/elementWood010.png') 0 0 no-repeat;
	top: 200px;
	left: 165px;
}

/* mouse followers */
.pe-h-follower{
	width: 100%;
	height: 10px;
}

#h1:hover ~ #box{
	top: 0px;
}

#h2:hover ~ #box{
	top: 10px;
}

#h3:hover ~ #box{
	top: 20px;
}

#h4:hover ~ #box{
	top: 30px;
}

#h5:hover ~ #box{
	top: 40px;
}

#h6:hover ~ #box{
	top: 50px;
}

#h7:hover ~ #box{
	top: 60px;
}

#h8:hover ~ #box{
	top: 70px;
}

#h9:hover ~ #box{
	top: 80px;
}

#h10:hover ~ #box{
	top: 90px;
}

#h11:hover ~ #box{
	top: 100px;
}

#h12:hover ~ #box{
	top: 110px;
}

#h13:hover ~ #box{
	top: 120px;
}

#h14:hover ~ #box{
	top: 130px;
}

#h15:hover ~ #box{
	top: 140px;
}

#h16:hover ~ #box{
	top: 150px;
}

#h17:hover ~ #box{
	top: 160px;
}

#h18:hover ~ #box{
	top: 170px;
}

#h19:hover ~ #box{
	top: 180px;
}

#h20:hover ~ #box{
	top: 190px;
}

.pe-h-follower:active ~ #box{
	-webkit-transform: translate3d(165px,200px,0);
}

/*
=======================
ENGINE SECTION
=======================
*/
.pe-wall{
	display: block;
	position: relative;
	border:1px solid green;
}

.pe-box{
	display: block;
	position: absolute;
	transition: top .8s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.pe-h-follower:hover ~ #box{
	transition: top .1s;
}

.pe-h-follower{
	display: block;
	position: relative;
	z-index: 9999;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	/*border: 1px solid red;*/
}

.pe-h-follower:active{
	border-color:green;
}

/*Downloaded from https://www.codeseek.co/coderontheroad/pure-css-physics-engine-qdgQrL */
/*
  NO JS JUST PURE CSS!
*/

Comments