2019-06-05第九天

1、.box:hover{

/*box的动画不会影响到box2*/

/*位移*/

transform: translate(50px,50px);

}

.box2:hover{

/*沿Z轴旋转360度*/

transform: rotate(360deg);

}

.box3:hover{

/*缩放*/

transform: scale(0.5,0.2);

}

.box4:hover{

/*斜切*/

/*transform: skew(45deg,0);*/

transform: skew(0,45deg);

2、旋转方向判断

1、X轴向右、Y轴向下、Z轴向屏幕外

2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/

.box{

width: 300px;

height: 300px;

background-color: gold;

margin: 50px auto 0;

transition: all 500ms ease;

/*设置盒子按3D空间显示*/

transform-style: preserve-3d;

transform: perspective(800px) rotateY(0deg);

}

.box:hover{

/*默认沿Z轴旋转*/

/*transform: rotate(45deg);*/

/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/

/*transform: perspective(800px) rotateX(45deg);*/

transform: perspective(800px) rotateY(-45deg);

3、