2D变形

最新推荐文章于 2023-01-13 17:52:09 发布

一个对前端瑟瑟发抖的小白

最新推荐文章于 2023-01-13 17:52:09 发布

阅读量296

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_46578458/article/details/105373454

版权

变形

      变形   transform   


                                2d   平面结构 
                                 
                                       1 :  2d的位移   类似于position中的relative
                                       
                                          对角移动          transform：translate（x,y）;
                                          水平移动          transform：translateX（）;
                                          垂直移动          transform：translateY（）;

                                             
                
                                       2 :  2d的缩放    

                                       元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，
                                       使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
                                                       
                                                            transform：scale（x,y）
                                                            transform：scaleX（）
                                                            transform：scaleY（）
                                      
                                       3 :  2d的旋转  
                                        
                                            根据对象原点指定一个2D旋转  顺时针度数为正 逆时针度数为负；
                                       
                                            沿平面旋转           transform：rotate（x,y）
                                            沿X轴旋转            transform：rotateX（）
                                            沿Y轴旋转            transform：rotateY（）
                                         
                                       4 :  2d的倾斜  
                                       
                                                        transform：skew（x,y）
                                                        transform：skewX（）
                                                        transform：skewY（）

                         
                         
                            变形原点   
                                     
                                         transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，
                                         该属性只有在设置了transform属性的时候起作用；
                            
                      
                         transform-origin：；
                          
                                     属性值   left/right/center/top/bottom
                                              px
                                              百分比