Perspective CSS Function() of the Transform Property

The perspective() CSS function of the transform property sets the distance between the user and the z=0 plane. It helps us to give a 3D effect as it can make how closer or further the viewer can see the 2D or 3D elements. The perspective() value cannot be negative because the perspective(0) is the highest value where z=0 plane. If we increase the perspective() value, the distance between the user and the z=0 plane will also increase.

Perspective() CSS function in 3D Cube

<!DOCTYPE html>
<html>
<head>
   <style>

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  box-sizing: inherit;
}

  .threeD {
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  rotate: 2 4 0 20deg;
  scale: 0.8 0.8 0.8;
  transform: perspective(40em);
}

.area {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.8;
  color: white;
  font-size: 10em;
  display: grid;
  align-items: center;
  text-align: center;
  border: solid 20px #2effea;
  }

.front {
  transform: translate3d(0, 0, 1.2in);
  background: #ff2ed9;
}

.back {
  transform:  translateZ(-120px) rotateY(180deg);
  background: #c02eff;
}

.left {
  right: 80px;
  transform: rotateY(270deg);
  background: #f5ff2e;
}

.right {
  left: 120px;
  transform: rotateY(90deg);
  background: #ffab2e;
}

.top {
  bottom: 80px;
  transform: rotateX(90deg);
  background: blue;
}

.bottom {
  top: 120px;
  transform:  rotateZ(180deg) rotateX(90deg);
  background: #34eb7d;
}

  </style>
</head>

<body>
<div class="threeD"> 
<div class="area front">1</div>  
<div class="area back">2</div>
<div class="area left">3</div> 
<div class="area right">4</div> 
<div class="area top">5</div>
<div class="area bottom">6</div>  
</div>
</body>

</html>

Perspective() CSS function in 2D Plane

<!DOCTYPE html>
<html>
<head>
   <style>
       div {
              border: 5px solid #ff00ff;
              width: 350px;
              padding: 80px; 
              text-align: center; 
              font-size: 4em; 
              font-weight: bold;
              background: greenyellow; 
              margin: 100px; 
              transition: all 8s ease; 
          }
     div:hover {
             cursor: pointer;
             transform:  perspective(500px) rotateX(360deg); /* translateZ(-600px) */
}
  </style>
</head>
<body>
   <div>Perspective()</div>
</body>
</html>

NEW POSTS

Main Menu

Perspective CSS Function() of the Transform Property

No comments

Post a Comment

Pages

NEW POSTS

Main Menu

Perspective CSS Function() of the Transform Property

You Might Also Like

No comments

Post a Comment

Pages