黑马程序员技术交流社区

标题: hxl [打印本页]

---

作者: 黄心灵    时间: 2019-4-11 14:53
标题: hxl

3d转换
        1）三维坐标系
                x轴
                y轴
                z轴：垂直屏幕的方向，到眼睛这个方向是正值。
        2）透视（视距）perspective
                作用:好比,进入3d电影放映大厅，带上3d眼镜，坐到合适的位置(第1排还是最后1排）。
                注意：
                        1）如果不设置透视，不能开启3d空间。
                        2）透视的值是px。
                        3）透视属性加给，被观察元素的父级元素。
        3）3d位移
                translateX()
                translateY()
                translateZ()，往脸这个方向是正值。
        4）3d旋转
                沿着x轴旋转：【耍单杠】，transform:rotateX(度数);
                        1）确定x轴的位置
                        2）确定旋转的方向（正值角度的方向、负值角度的方向）--左手准则
                沿着y轴旋转：【钢管舞】，transform:rotateY(度数);
                        1）确定y轴的位置
                        2）确定旋转的方向（正值角度的方向、负值角度的方向）
                沿着z轴旋转：【抽奖转盘】
        5）3d呈现【******】transform-style:preserve-3d;
                作用：让子元素保持3d效果。
                用法：加给父元素。
               
               
               
               
【1】翻转两面盒子
        html结构：
                1）父盒子中有2个子盒子（前面、后面）
                2）2个子盒子要摞起来（定位，前面盒子要在最上面）
                3）2个子盒子要背对背（后面盒子沿着y轴旋转180度，保留子元素的3d效果）
                4）翻转父盒子（沿着y轴旋转180度）
               
【2】3d导航栏
        html结构：
                1）父盒子中有2个子盒子（前面、下面）
                2）2个子盒子要摞起来（定位，前面盒子要在最上面）
                3）下面盒子要【趴着】（沿着x轴旋转-90度），
                   再跟前面盒子一起摆放成L形（前面盒子沿z轴移动高度的一半，下面盒子沿y轴移动高度的一半）
                4）旋转父盒子（鼠标悬浮父盒子时，沿着x轴旋转90度）

【3】旋转木马
        html结构：
                1）父盒子中有6个子图片盒子
                2）6个图片盒子摞起来（定位）
                3）6个图片盒子围成一圈（注意：保留子元素的3D效果）
                        1》第1张图片盒子，沿着z轴移动300px。
                        2》第2张图片盒子，先沿着y轴旋转60度，然后沿着z轴移动300px。
                        3》第3张图片盒子，先沿着y轴旋转120度，然后沿着z轴移动300px。
                        4》第4张图片盒子，先沿着y轴旋转180度，然后沿着z轴移动300px。
                        5》第5张图片盒子，先沿着y轴旋转240度，然后沿着z轴移动300px。
                        6》第6张图片盒子，先沿着y轴旋转300度，然后沿着z轴移动300px。
                4）不停地旋转父盒子（跳钢管舞）
                        使用动画
                                1）动画序列
                                        初始状态，0%，沿着y轴旋转0度
                                        结束状态，100%，沿着y轴旋转360度
                                2）使用动画
                                        无限播放
                                        鼠标悬浮父盒子时，暂停动画

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2