新闻中心

CSS-3D正方体旋转

时间:2019-11-05 23:06

  2、学习掌握perspective的用法,包括perspective-orgin(X,Y)的用法,及perspective(xxpx)的用法。前者用于设置观看点,通过不同位置的观看能够看到不一样的立体图形,X代表X轴方向的位置,Y代表Y轴方向的位置;Z方向的位置可通过perspective()来设置,也叫视距。视距越大,立体效果越不明显。

  第一步:通过对正方体前、后、左、右、上、下六个平面进行transform变形实现正方体的构建;

  通过对back平面进行Y轴旋转得到left,通过对back平面进行X轴旋转得到bottom,通过对back进行Z轴方向平移得到front,通过对left进行X轴方向平移得到right。

环亚