A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 梦曦 初级黑马   /  2019-4-11 13:55  /  1877 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

         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)使用动画
                                        无限播放
                                        鼠标悬浮父盒子时,暂停动画

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马