《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 24.3D转换

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍3D

转换

3D转换3D的特点：近大远小被遮挡视为不可见三维坐标系三维坐标就是指立体控件，立体控件是由3个轴共同组成的。X轴：水平向右x右边为正值，左边为负值；Y轴：垂直向下y向下为正值，向上为负值；Z轴：垂直屏幕z往外为正值，往里为负值-YYZ-ZX-X

3D转换主要知识点透视：persective3D位移：translate3d(x,y,z)3D旋转：rotate3d(x,y,z)3D呈现transform-styletranslate3d（3d移动）3D移动在2D移动的基础上了一个坐标轴，即Z轴方向transform:translateX(100px);仅仅是在X轴上移动transform:translateY(100px);仅仅是在Y轴上移动transform:translateZ(100px);仅仅是在Z轴上移动transform:translate3d(x,y,z);其中x、y、z分别是移动轴方向的距离，单位一般为pxtransform:translate3d；连写时每个值必须写，没有写0如：transform:translate3d(0,0,100px);Z轴是垂直于屏幕，由屏幕指向眼睛的方向为正方向。perspective（透视）想要网页产生3D的效果就需要添加透视效果；透视又称为视距，即人眼睛到屏幕的距离；视距距离电脑屏幕越近成像越大，反正越小；透视属性写在被观察元素的父元素上透视的单位是像素px---d---就是视距视距就是眼睛到屏幕的距离,视距越小越近看物体就越大，反之越小；perspective（透视）---d---就是视距视距就是眼睛到屏幕的距离,视距越小越近看物体就越大，反之越小；translateZtransform:translateZ(200px);在Z轴上移动。有了透视区域，就可以看到translateZ引起的变化。近大远小往外是正值往里是负值perspective（透视）rotate3d（3D旋转）3D旋转可以让元素在三位平面内沿着x轴、y轴、z轴或者自定义轴进行旋转。语法：transform:rotateX(30deg)：沿着x轴正方向旋转30度；transform:rotateY(30deg)：沿着y轴正方向旋转30度transform:rotateZ(30deg)：沿着z轴正方向旋转30度transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg度判断旋转的方向：左手的拇指指向X轴的正方向其余弯曲的四指就是该元素旋转的方向手指弯曲的方向为正X轴左手准则transform:rotate3d(x,y,z,deg);沿着自定义轴旋转。xyz表示旋转轴的矢量，是标示是否希望沿着该轴旋转，deg为旋转的角度。transform:rotate3d(1,0,0,45deg);沿着X轴旋转45degtransform:rotate3d(1,1,0,45deg);沿着对角线旋转45degrotate3d（3D旋转）任务实践任务1旋转的立方体（1）创建站点文件夹，新建文件1005.html。（2）设置一个240*240的大盒子，设置透视效果800px。（3）结构用无序列表，即6个li200*200为正方体的六个面，对其设置不同背景色。（4）用绝对定位把六个面重合在一起。（5）li的父元素ul大小为200*200，并对其添加transform-style：preserve-3d；设置子元素显示3D效果。（6）用动画+旋转制作拼合立方体效果，如：第一个面，先将中心点的位置设为左侧，然后沿着X轴向左平移，再沿着Y轴负方向旋转90度；第二个面先将中心点的位置设为右侧，然后沿着X轴向右平移，再沿着Y轴负方向旋转90度；第三个面先将中心点的位置设为上方，然后沿着Y轴向下平移，再沿着X轴旋转……（7）拼