Css3D Wall

In this example below you will see how to do a Css3D Wall with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 6863268, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 6863268 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Css3D Wall</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <ul>
    <li><div>C</div></li>
    <li><div>S</div></li>
    <li><div>S</div></li>
    <li><div>3</div></li>
    <li><div>3</div></li>
    <li><div>D</div></li>
    <li><div>I</div></li>
    <li><div>S</div></li>
    <li><div>C</div></li>
    <li><div>O</div></li>
    <li><div>O</div></li>
    <li><div>L</div></li>

  </ul>
</div>
<div class="bottom">This looks better on Chrome and Safari</div>
  <script src='https://code.jquery.com/jquery-1.8.0.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/6863268/css3d-wall-Aardv */
html {
  height: 100%;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 960, from(#f700dd), to(#7c006f)) no-repeat #7c006f;
  background: -moz-radial-gradient(50% 50% 0deg, ellipse farthest-corner, #f700dd, #7c006f, #7c006f 170%);
  -webkit-user-select: none;
  cursor: move;
}
body {
  margin: 0;
}
ul,
li {
  margin: 0;
  list-style: none;
  float: left;
}
ul {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
li {
  margin: 10px 15px ;
  width: 150px;
  height: 90px;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(rgba(0, 0, 0, 0.2)), to(transparent)) no-repeat rgba(255, 255, 255, 0.1);
  background: -moz-radial-gradient(50% 50% 0deg, ellipse farthest-corner, rgba(0, 0, 0, 0.2), transparent, transparent 100%), rgba(255, 255, 255, 0.1);
  -webkit-user-select: none;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFF;
  text-align: center;
  padding: 20px 0;
  font: 70px "Arial Black", Gadget, sans-serif;
}
ul li div {
  transform: translateZ(70px);
  -ms-transform: translateZ(70px);
  /* IE9 */
  -moz-transform: translateZ(70px);
  /* Firefox */
  -webkit-transform: translateZ(70px);
  /* Safari and Chrome */
  -o-transform: translateZ(70px);
  /* Opera */
}
.container {
  width: 820px;
  margin: 50px auto;
  position: relative;
}
/* Not relevant for the experiment */
.bottom {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(0, 0, 0, 0.4);
  color: #FFF !important;
  padding: 5px 0;
  display: block;
}


/*Downloaded from https://www.codeseek.co/6863268/css3d-wall-Aardv */

  var mouseX = null,
    mouseY = null,
    rotationLeftRight = null,
    rotationTopBottom = null,
    centerX = null,
    centerY = null,
    agleRotation = null;
  
	$('html').mousemove(function(e){
		
		centerX = $(this).width() / 2 ;
 		centerY = $(this).height() / 2;
		
		mouseX = (e.pageX - this.offsetLeft) - centerX;
		mouseY = (e.pageY - this.offsetTop) - centerY;
		
		rotationLeftRight =  mouseX;
		rotationTopBottom =  mouseY;
		agleRotation = (Math.abs(rotationTopBottom) + Math.abs((rotationLeftRight))) / 10;

		$('ul').css({
			transform: "rotate3d("+rotationTopBottom +", "+rotationLeftRight+", "+0+", "+agleRotation+"deg)",
			});
		})

Comments