CSS

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

HTML

<div class='needle'></div>

In the above example, a needle or compass pointer shape is created using 3D transforms. Generally when we apply the rotate transform on an element, the rotation happens only in the Z-axis and at best we will end up with diamond shapes only. But when a rotateY transform is added on top of it, the element gets squeezed in the Y-axis and thus ends up looking like a needle. The more the rotation of the Y-axis the more squeezed the element looks.

The output of the above example would be a needle resting on its tip. For creating a needle that is resting on its base, the rotation should be along the X-axis instead of along Y-axis. So the transform property’s value would have to be something like rotateX(85deg) rotateZ(45deg);.

This pen uses a similar approach to create something that resembles the Safari logo or a compass dial.

Screenshot of element with no transform:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f03498b0-3dd1-4e75-bc98-5df96e6b332c/Untitled.png

Screenshot of element with only 2D transform:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e83111cb-75a7-40e4-a052-fb9888f682f1/Untitled.png

Screenshot of element with 3D transform:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e46c0e82-370d-4b5d-9b90-cdc2e15b5fc8/Untitled.png