css2D转换和3D转换

一、2D转换（transform):

　　div{

　　　　width:200px;

　　　　height:200px;

　　　　border-top:2px soild black;

　　　　border-left:2px soild red;

　　　　border-right:2px soild bule;

　　　　border-bottom:2px soild green;

　　　　偏移（translate):

　　　　　　transform:translate(50px,200px);

　　　　　　　　　　（将元素从左侧移动50像素，从顶端移动200像素）

　　　　转换角度（rotate）:

　　　　　　tranform:rotate(45deg);

　　　　　　　　(顺时针旋转45度）

　　　　尺寸增减（scale）：

　　　　　　transform:scale(2,4);

　　　　　　　　（将宽度增加为原来的2倍，高度增加为原来的4倍）

　　　　翻转（skew）:

　　　　　　transform:skew(30deg,20deg);

　　　　　　　　（将元素围绕x轴翻转30度，围绕y轴翻转20度）

二、3D转换（将元素围绕x轴、y轴、z轴进行旋转）：

　　　　　　div{　　　　

　　　　　　　　　width:200px;　　　　　　

　　　　　　　　　height:100px;

　　　　　　　　　border-top:2px soild green;

　　　　　　　　　border-left:2px soild red;

　　　　　　　　　border-right:2px soild gold;

　　　　　　　　　border-bottom:2px soild black;

　　　　　　　　围绕x轴旋转：

　　　　　　　　　　transform:rotateX(180deg);

　　　　　　　　围绕Y轴旋转：

　　　　　　　　　　transform:rotateY(90deg);

　　　　　　　　围绕Z轴旋转：

　　　　　　　　　　transform:rotateZ(180deg);

　　　　　　　　　　

 

 

　　　　

　　　　

 

转载于:https://www.cnblogs.com/xingxing88/p/5861456.html