正文

3D 转换

IP云
IP云V管理员/4 阅读
09/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。如下图

1、左手坐标系

2、透视（perspective）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现 ，通过透视可以实现此目的。perspective

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。（没有perspective，便“没有”Z轴）

沿着X 进行旋转

沿着Y进行旋转

沿着Z轴进行旋转

案例1：百度音乐盒

music-box::after {

background-image:url(../iamges/music.jpg);

transition:all 1s;

//设置旋转原点

transform-origin:center bottom;

backface-visibility:hidden;

}

.music-box:hover::after {

//沿着X轴-180deg旋转

transform:rotateX(-180deg);

}