第二十六节-transform

transform 里面四个   1.rotate()    eg:rotate(360deg),旋转360度，用deg 表视度 除了deg 还可以用 turn一圈 eg:transform:rotate(1turn)   正值顺时针 负值逆时针

                      旋转有个基点问题：transform-origin 默认值 50% 50%;

                                                                               右下角：transform:100% 100%;  

                                                        也可以用英文词：左上角：transform:0 0;, 

                                                         当给具体px 时是以左定点为基点的： eg:transform:rotate(-50px,-50px)

                                 2.translate（x,y)   不用margin-left  margin-top 而用transform 的原因：1.方便

                                                                                                                                                2.margin 给值百分比，相对于父级，transform 给值百分比相对于自身

                                绝对居中（用margin)：

                                  margin-top margin-left 随着 自身宽高改变而改变，但又不能刚给百分比

                                               （用transform):给百分比较简单

                                    3. scale(1) 缩放 默认值1

                                          transform:scale(0.5)      缩小成原来的一半，括号里写一个值x y 方向都缩放

                                                          :scale(1,0.5)  写两个值，x 方向 y方向 分别缩放

                                   4. skew(deg):倾斜 

 transition:transform            transition:top (而不是position)

  transform 多个值之间用空格，transition 多个值之间用逗号隔开。

位移配合旋转：即向某个方向旋转而去，效果好。一般位移translate写在前面

                        translate 写在前面 rotate 写在后面 与 rotate 写在前面 translate 写在后面 效果不一样，因为rotate之后，translate 移动的x 轴方向 与y 轴方向发生了 改变。

第二十六节-transform

原文：https://www.cnblogs.com/yzdwd/p/12171059.html