Rotate3D CSS - Comforting Tools

The rotate3d() CSS function defines a transformation that rotates an element in multiple directions at a time. It makes a 3D rotation on the X, Y, and Z axes. The rotate3d() function consists of 4 values, x,y,z, and a. The first three values can be in numbers and they are the x, y, and z coordinates of the vector denoting the axis of rotation. The fourth value, a, represents the angle of rotation. It can be in deg or turn or grad or rad.

The X value will rotate the element on the X-axis. Here the positive value rotates the element from the bottom to the top direction and the negative value rotates the element from the top to the bottom direction.

The Y value will rotate the element on the Y-axis. Here the positive value rotates the element from the left to the right direction and the negative value rotates the element from the right to the left direction.

The Z value will rotate the element on the Z-axis. Here the positive value rotates the element circularly in a clockwise wise direction and the negative value rotates the element circularly in a counterclockwise direction.

1. transform: rotate3d(1, 1, 1, 30deg); Here the element will be rotated by 30 degrees on all the X, Y, and Z axes.

2. If the value of the X is higher than the Y & Z values, the rotations on the Y & Z axes will decrease while the rotation on the X-axis will increase to a certain point. Example: transform: rotate3d(8, 1, 1, 30deg);

3. If the value of the Y is higher than the X & Z values, the rotations on the X & Z axes will decrease while the rotation on the Y-axis will increase to a certain point. Example: transform: rotate3d(1, 8, 1, 30deg);

4. If the value of the Z is higher than X & Y, the rotations on the X & Y axes will decrease while the rotation on the Y-axis will increase at a certain point. Example: transform: rotate3d(1, 1, 8, 30deg);

5. transform: rotate3d(8, 4, 1, 30deg); In this case, to rotate more at the same position, we can increase the angle value. If we want to rotate from 30deg to 90deg, we can write as shown here transform: rotate3d(8, 4, 1, 90deg);

Let's look at the examples of positive or negative values of the XYZA as follows:

1. transform: rotate3d(1, 1, 1, -30deg);
Here all the values of the XYZ will be negative which is equivalent to transform: rotate3d(-1, -1, -1, 30deg);

2. transform: rotate3d(-1, -1, -1, -30deg);
Here all the values of the XYZA will be positive which is as same as transform: rotate3d(1, 1, 1, 30deg);

3. transform: rotate3d(-1, 1, 1, -30deg);
Here the value of the X will be positive 1 while the values of Y & Z will be negative

4. transform: rotate3d(1, -1, 1, 30deg);
Here the value of the Y will be negative.

5. transform: rotate3d(0, 0, 0, 30deg);
No rotations will occur if the values of all x, y, and z are zeros.

<!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: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transition: all 8s ease;
}

.threeD:hover{
  transform: rotate3d(1, 1, 1, 330deg);
  cursor: pointer;
}

.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: translateZ(168px) ;
  background: #ff2ed9;
}

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

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

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

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

.bottom {
  top: 168px;
  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>