2017/7/26 学习心得 css3第三天

1、3D转换 transform:

向右是正，向下是正，向前是正，都是以中心点为圆心旋转

 rotateX(30deg) 绕着x旋转30deg

   rotateY(30deg) 绕着y旋转30deg

   rotateZ(30deg) 绕着z旋转30deg

   translateX(30px) 沿着x轴移动30px

   translatey(30px) 沿着y轴移动30px

   translatez(30px) 沿着Z轴移动30px(必须给父盒子加透视)

top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

scale(x,y) 2D缩放

倾斜效果：skew（skewX,skewY），横向是y，纵向是x，以盒子中心为原点

所有3D旋转，对着正方向看，都是顺时针

 2、透视(近大远小的效果）加给变换的父元素

perspective：1000px；设置的是用户眼睛距离屏幕的距离

透视效果只是视觉上的呈现，并不是真正的3d

backface-visibility:hidden;  让盒子背面隐藏

3、真正的3D效果

transform-style:presever-3d;加到有需要3d的盒子上

4、动画

类似js中的函数，先定义，再调用

定义动画：

@keyframes 动画名{

from{初始状态}

to{结束状态}

}

调用：

animation:动画名称 持续时间 调用次数 是否反向 运动曲线;

多组动画：

@keyframes gun{

0%{ 初始状态 }

25%{  }

75%{ }

100%{ }

}

animation-name:动画名称

animation-duration:持续时间

animation-iteration-count:执行次数 infinite无限次

animation-diretion:动画的方向 normal正常 alternate反向

animation-delay:延迟执行

animation-fill-mode:保持动画结束后的状态：forwards 保持动画开始前的状态：backwards

animation-timing-function:运动曲线  linear ease-in-out ease-in steps(3)分步，分几次完成

5、多列布局

column-count:n; n是几列

column-rule1px dashed red;分割线

column-gap:60px;设置列间距

column-width:200px;列宽度

 column-span:all; 设置跨列