day15 2D 3D

都在css中实现

旋转

transform:rotate(45deg)默认是z轴旋转

transform:rotateX(45deg)

transform:rotateY(45deg)

变换基点

transform:origin:20px 20px;

缩放

transform:scale(0.5);数字代表扩大多少倍数

位移

transform:translate(50%,50%);

不知父级宽高实现居中

transform:translate(-50%,-50%);

倾斜

transform:skew(45deg)

transform复合写法

transform:skew(45deg)倾斜 rotateX(180deg)旋转 translate(100px)位移 scale(1.5)放大 ;

transform先执行后写的属性，再执行前面属性，translate会受其他三个属性的影响

盒模型

box-sizing:border-box

正常盒模型：总宽度=width+ padding +border

怪异盒模型：总宽度=width = padding + border

&lt是小于号  &gt是大于号

css计算属性calc()

top:calc(50% - 40px) 相当于  top:50% margin-top:-40px;

3D

transform-style:preserve-3d;

需要在父盒子处加上景深：perspective:1000px;

小景深拍小物体近物体  大景深拍远的