CSS 3D是一種用于創建交互式3D網頁和應用程序的技術，它通過使用三個級別(平移、旋轉和縮放)來實現各種3D效果。本文將介紹CSS 3D的水平旋轉。

在CSS 3D中，水平旋轉是指將一個水平方向的運動轉換為垂直方向的運動。這種轉換可以通過旋轉物體的垂直軸來實現。在CSS 3D中，可以使用以下兩種方法之一來設置水平旋轉：

方法一：使用CSS旋轉

使用CSS旋轉可以實現水平旋轉。要設置水平旋轉，需要先指定旋轉角度和旋轉中心。旋轉中心是指物體旋轉的中心點。可以使用以下代碼來設置水平旋轉：

position: relative;

transform: rotateY(60deg);

在上面的代碼中，將“position: relative”應用于要旋轉的物體，然后使用“transform: rotateY(60deg);”設置水平旋轉。請注意，旋轉中心是旋轉的中心點，它應該與物體的坐標系原點相同。

方法二：使用CSS變換

使用CSS變換也可以實現水平旋轉。與使用CSS旋轉不同，使用CSS變換可以設置多個軸的旋轉，并且可以使用不同的參數來控制旋轉的程度和方向。要設置水平旋轉，需要先指定旋轉軸和旋轉角度。可以使用以下代碼來設置水平旋轉：

position: relative;

transform: translateY(100px);

transform-origin: 0 100%;

transform: rotateY(60deg);

在上面的代碼中，將“position: relative”應用于要旋轉的物體，然后使用“transform: translateY(100px);”和“transform-origin: 0 100%;”設置水平和垂直方向的旋轉。請注意，“transform: rotateY(60deg);”設置了水平和垂直方向的旋轉角度為60度。

通過使用CSS 3D，可以輕松創建交互式的3D效果。通過使用CSS旋轉和CSS變換，可以設置多種軸的旋轉，從而實現復雜的3D效果。