使用 3D 变换的指南针指针或针形状

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>

在上面的示例中，使用 3D 变换创建针或罗盘指针形状。通常，当我们对元素应用 rotate 变换时，旋转仅在 Z 轴上发生，并且最多我们将仅以钻石形状结束。但是当在其上面添加 rotateY 变换时，该元素在 Y 轴上被挤压，因此最终看起来像针。Y 轴的旋转越多，元件的压缩程度就越大。

上述例子的输出是在其尖端上留下的针。为了形成搁置在其基部上的针，旋转应该沿着 X 轴而不是沿着 Y 轴。所以 transform 属性的价值必须像 rotateX(85deg) rotateZ(45deg);。

此笔使用类似的方法创建类似于 Safari 徽标或罗盘拨号的内容。

没有变换的元素的屏幕截图：

仅具有 2D 变换的元素的屏幕截图：

具有 3D 变换的元素的屏幕截图：