CSS3新增样式2D+3D效果-立方体旋转

CSS3新增样式2D+3D变形

• 下面是通过旋转和平移实现的3D立方体旋转
  
  

CSS3新增2D变形属性

• 2D变形：transform主要包括以下几种：none、旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix
• 旋转和平移属性

transform：rotate(30deg);//旋转角度
transform:translate(100px,200px);//顺着X、Y轴平移的像素
transform:translateX(100px);//顺着X轴平移的像素
transform:translateY(100px);//顺着Y轴平移的像素
数值可正可负

• 缩放scale()，具有相同的缩放中心和基数，中心点就是元素的中心位置，缩放为倍数，基数为1，如果1为放大，小于1为缩小

transform：scale（2,1.5）;//水平方向缩放2倍、竖直方向缩放1.5倍
transform:scaleX(2);//水平方向缩放2倍
transform:scaleY(1.5)