第十四章 transform样式

一,transform

transform: 可以使元素平移,缩放,倾斜,位置

1.平移

 写法:transform:translate(10px,10px)  平移(不会脱离文档流)
                          x轴   y轴
    只写一个值会x轴平移 (可以理解为定位的升级版 )

2.复合样式写法.旋转

写法:transform:translate(10px,10px) rotate(45deg) 默认z轴旋转[正数顺时针,负数逆时针]
                                              rotateX(45deg)  rotateY(45deg)

3. 起始位置

  transform-origin:x y;
   元素旋转的起始位置

4.缩放

  transform:scale(宽,高)  缩放  负数进行倒置  元素里面也会随之变大

5.倾斜

  倾斜样式:
   transform:skew(45deg,45deg)
                    x     y   
                    
    按顺序来生效

二,2d---->3d

2d---3d
在父级设置perspective:700px; 视距,相当于站在远处看(自己看)

    transform-style:preserve-3d;给元素充满空间元素,这个必须有,放在父级里面

三,盒子阴影

盒子阴影:box-shadow: x y 阴影模糊度 阴影缩放 眼色 内显inset 外显(默认外显)

box-shadow : 1px 1px 1px 1px inset;