css3 は立方体と回転の効果を実装します_html/css_WEB-ITnose

まず、親 div には 4 つの絶対配置 div が含まれます

1

>2

3

4

(2.5em /* 辺の長さの半分、この場合は 5em */); nth-child(2) { -webkit-transform: 回転 Y(90 度) 変換 Z(2.5em); } .face:nth-child(3) { -webkit-transform: 回転 Y(180 度) 変換 Z(2.5em); } face:nth-child(4) { -webkit-transform:rotateY(270deg) translationZ(2.5em); }

立方体を回転させます

.cube --ni {-webkit -animation: Rot 4S Linear Infinite; } @-webkit-Keyframes Rot {tobkit-transform: Rotatey (-330Deg) Rotatex (37 0Deg);}}

アニメーションの回転はここで定義されます

開始位置から Y 軸 -330 度 X 軸まで回転します370 度

そして毎回 4 秒ずつ無限ループします

OK!