Css3D Wall

Tutorials of (Css3d wall) by Denxxx

<!DOCTYPE html>
<html >
<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/ */
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/ */

  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)",
			});
		})

This awesome code ( Css3D Wall ) is write by denxxx, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © denxxx