图片变形和遮罩旋转

变形

.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);

}

position: relative;

/*默认文字不可见*/

/*定位使色块在图片正下方*/

position: absolute;

left: 0;

top: 300px;

transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);

}

.box:hover .pic_info{

/*色块上移*/

top:150px;

}

/*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/

.box .pic_info p{

margin: 20px;

line-height: 30px;

}

/*旋转方向判断

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

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

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

transform-style: preserve-3d;

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

}

/*默认沿Z轴旋转*/

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

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

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

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

div:nth-child(1){

/*设置变形的中心点*/

transform-origin: left center;

}

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

transform-style: preserve-3d;

/*设置透视距离、三维旋转的初始角度*/

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

/*设置盒子背面是否可见*/

backface-visibility: hidden;