一、2D形变：
形变的属性名:transform
类型:
1.平移(translate)
2.缩放(scale)
3.倾斜(skew)
4.旋转(rotate)
demo中需要的图：
houRes/bg-grid.jpg：
houRes/cardKingClub.png
<body>
<div class="box">
<img src="houRes/cardKingClub.png"/>
<img src="houRes/cardKingClub.png" />
</div>
</body>
//基本的css：
.box{
width: 400px;
height: 400px;
background: url(houRes/bg-grid.jpg) no-repeat red;
/*background-size:支持百分比,百分比是基于box的大小而言,第一个是水平方向
7 第二个是垂直方向*/
background-size: 100% 100%;
position: relative;
}
img{
width: 100px;
height: 150px;
/*宽度明确,借助绝对定位,left: 0;right: 0;margin:0 auto;实现左右居中*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box img:first-child{
opacity: 0.5;
}
.box img:last-child{
/*1.平移:translate
3 translateX:水平方向
4 translateY:垂直方向
5 值为px或是百分比,百分比就是基于设置样式的标签本身的大小,
6 x:width,y:height
7 合起来写:translate(X,Y)[用逗号隔开]
8 */
transform: translateX(20px) translateY(20px);
/*transform: translate(20px ,20px);*/
/*transform: translate(20px);*/
}
效果图：
.box img:last-child{
/*2.缩放:
scaleX
scaleY
值为倍数,1=1倍
值为负数时,先翻转后缩放
合写:transform:scaleX(X,Y);
*/
transform: scaleX(0.6) scaleY(-0.6);
/*transform:scale(-0.5,0.5);*/
{
效果图：
.box img:last-child{
/*倾斜skew
3 单位是deg
4 当倾斜为90deg会消失不见
5 skew(x,y);
6 */
transform:skewX(45deg) skewY(0deg);
}
效果图：
1 .box img:last-child{
2 /*旋转rotate
3 单位:deg
4 默认点:中心的
5 正角度:顺时针旋转
6 负角度:逆时针旋转
7 */
8 /*transform:rotate(45deg)*/
9 /*更改旋转的源点
10 origin
11 默认值:center center
12 left top:左上角点
13 left bottom
14 right top
15 left=left center
16 */
17 transform-origin:left top;
18 transform:rotate(45deg)
19 }
效果图：
所有的属性都支持形变的:
transform:多组形变用空格
background:多组之间用","号
形变中平移其实真正的位置没有改变,移动就是个假象
二、3D形变
想要展示子元素的3d效果，必须要给子元素的父级添加：
transform-style:preserve-3d;属性和属性值,默认值为flat:平面展示(2d)
平移：translate3d(x,y,z)
缩放：scale3d(X,Y,Z)
旋转：transform :rotate3d(x,y,z,旋转度数);
* 当x,y,z的值为1时,就代表在该轴上进行旋转,度数为第四个参数