过渡效果额和3d转换笔记

1、 过渡 transitions
使一个样式逐渐过渡到另一个样式。

语法:
Transitons:property(初始形状) duration(持续时间) timing-function(过渡时间曲线) delay(鼠标上去马上过渡);
a. 属性名称
b. 定义过渡时所需的时间
c. Linear（相同速度）,ease(慢速)，ease-in（慢速），wase-our（缓入），ease-in-out（缓出）
2、 变形transform
2D转换（旋转）和3D转换
旋转Rotate（46deg）
倾斜skew（x轴度数，y轴度数）
缩放scale（x，y）<1缩小，>1放大，
移动
语法：transform：none|transform-functions;
a. 默认值为none，适用于内联元素和块元素，表示不进行变形。
b. 转换函数，可以设置以一个或多个
例子：过渡效果：.share1 img{transform:all 0.8s ease-in-out}
变形:.share1 img:hover{transform:rotate(360deg) scale(1,5)}放大0.5倍

3、 元素变形原点
元素的变形都有一个原点，元素围绕着这个点进行变形或旋转，默认的起始位置时元素的中心位置。
.box:hover img:nth-child(5){transform:rotate(300deg);}第五个孩子。

建立一个盒子 Transform-origin属性，指定元素变形基于的原点 语法：transform-origin：x-axis y-axis z-axis；transform-origin最多接受3个值，分别时x轴、y轴、z轴的偏移量。 a. Left ; center ; right ; length , %. b. Top ; center ; bottom ; length ; %. c. Length.

3D转换
某个元素绕xyz轴进行旋转，

Perspection,
.cube>div:子代选择器，选择cube选择器下的第一级选择器
3D导航转换