使用 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 變換的元素的螢幕截圖：