12.18 2D+3D

原创 502972636 随笔 前端初学 html+css 101阅读 2017-12-18 22:51:39 举报

喜欢每一个善良的好天气,阳光正暖,微风不燥,世界和我都刚刚好。

       2D:旋转

                 transform   变换
                            rotate (90deg)    旋转函数    取值度数
                                       deg(度数)
                             transform-origin: X    Y     旋转基点
                                       具体值:像素
                                       英文关键字:left right center top bottom
                            skew (90deg)    倾斜函数    取值度数   默认X轴斜切
                                      skewX()
                                      skewY()
                            scale()     缩放函数     取值正数  负数和小数
                                     scaleX()
                                     scaleY()
                           translate()  位移函数
                                    translateX()
                                    translateY()

                          矩阵:(原谅我数学不过关,只能记公式啦)
                                  标准样式:matrix ( a, b ,c ,d ,e,f )  矩阵函数
                                  IE下的矩阵没有E和F两个参数

                                 通过矩阵实现缩放:
                                         X轴缩放   a=X*a       c=X*c          e=X*e
                                        Y轴缩放    b=y*b       d=y*d          f=y*f
                                通过矩阵实现位移:
                                         X轴位移    e=e+x
                                         Y轴位移    f=f+y
                                通过矩阵实现倾斜
                                        X轴位移   c=Math.tan(xDeg/180*Math.PI)
                                        y轴位移   c=Math.tan(yDeg/180*Math.PI)
                               通过矩阵实现旋转
                                       a=Math.cos(deg/180*Math.PI)
                                       b=Math.sin(deg/180*Math.PI)
                                       c=Math.sin(deg/180*Math.PI)
                                       d=Math.cos(deg/180*Math.PI)

            3D:  x  y  z  (立体)
                    transform  新增函数
                              rotateX()
                              rotateY()
                              rotateZ()
                              translateZ()

                   perspective  景深(近大远小)  设置给父级
                   perspective-origin   景深基点    (像素  英文关键字)

                  transform-style    建立3D空间
                              transform-style:preserve-3d;
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复