CSS 3d Transform Rotating Cube

PHP

HTML

CSS

MONEY

Do you want such a cube on your site? Take the.

 

 

Code:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Rotating Cube</title>
<style>
.wrap {				
  -webkit-perspective: 500px;
	-ms-perspective: 500px;
          perspective: 500px;
  -webkit-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
		  float: left;
		  margin-right: 100px;
}

.cube {
  position: relative;
  margin: 20px;
  width: 70px;
  height: 70px;
  -webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.face {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 70px;
	padding: 5px 3px;
	color: #1F0405;
	font-size: 16px;
	text-align: center;
	line-height: 70px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 2px #705E5F;
}

.front {
  -webkit-transform: translateZ(38px);
	-ms-transform: translateZ(38px);
          transform: translateZ(38px);
		  background: #fff;
}

.back {
  -webkit-transform: translateZ(-38px) rotateY(-180deg);
	-ms-transform: translateZ(-38px) rotateY(-180deg);
          transform: translateZ(-38px) rotateY(-180deg);
		  background: #fff;
}

.left {
  -webkit-transform: translateX(-38px) rotateY(-90deg);
	-ms-transform: translateX(-38px) rotateY(-90deg);
          transform: translateX(-38px) rotateY(-90deg);
		  background: #fff;
}

.rght {
  -webkit-transform: translateX(38px) rotateY(90deg);
	-ms-transform: translateX(38px) rotateY(90deg);
          transform: translateX(38px) rotateY(90deg);
		  background: #fff;
}

.rotate-y {
  -webkit-animation: spinY 10s infinite linear;
	-ms-animation: spinY 10s infinite linear;
          animation: spinY 10s infinite linear;
}

@-webkit-keyframes spinY {
  from {
    -webkit-transform: rotateY(0);
	-ms-transform: rotateY(0);
            transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes spinY {
  from {
    -webkit-transform: rotateY(0);
	-ms-transform: rotateY(0);
            transform: rotateY(0);
  }
  to {
    -webkit-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
</style>
</head>

<body>
  <div id="wrap" class="wrap">
  <div class="cube">
  <div id="cube" class="cube rotate-y">
    <p class="face back">PHP</p>
    <p class="face front">HTML</p>
    <p class="face left">CSS</p>
    <p class="face rght">MOUNY</p>
	</div>
    </div>
</div>
</body>
</html>

If someone wants to twist the cube vertically, then in styles, all Y’s need to be corrected for X.

I wish you creative success.

This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *