css3中的2D和3D的各种属性和值

css3中的2d
二维的平面空间

		css3 2d属性 
			变形属性 transform:;
			
		2d变换:
			位移		transform:translate();
			旋转		transform:rotate();
			缩放		transform:scale();
			倾斜		transform:skew();

位移:
transform:translate(水平位移,垂直位移);
transform:translate(水平位移);

			transform:translateX(水平位移);
			transform:translateY(垂直位移);
			
			默认情况: 正值 从上往下,从左往右

缩放: transform:scale(水平垂直都缩放);
transform:scale(水平缩放,垂直缩放);
transform:scaleY(垂直缩X放);
transform:scaleX(水平缩放);
取值范围: 0-0.9999999 缩小
1 原来大小
大于1 放大

旋转
transform:rotate(); 旋转是一个度数 deg
默认情况 中心点为旋转点
倾斜: skew() deg
transform:skew(水平倾斜);
transform:skew(水平,垂直);
transform:skewX();
transform:skewY();
选择器:target{} 当元素被点击时的指向,发生样式的改变

		css样式 圆角:
			border-radius:;
			元素是正方形  宽度的一半px 	50% 正圆
			元素是长方形	较小值的一半px	半圆
						50%	椭圆

css3 景深 (3D的空间)
观察物体的时候 近大远小

			给父级元素添加:
				transform-style:preserve-3d;形成3D的空间
				perspective:800px;添加景深  形成近大远小的效果 900px-1200px
			设置观察点:
				perspective-origin:;
					left right 
					top bottom
					px
					
			background:rgba(红,绿,蓝,透明度);
				a 透明度 取值范围 0-1 背景颜色透明

2d: 水平方向(x轴) 和 垂直方向(y轴)
3d: 多了一个z轴
z轴就是你对屏幕垂直的视线,靠近屏幕的方向就是正向,远离屏幕的线是反向

		3D功能函数:
			3D的位移
				translateX()
				translateY()
				translateZ()
				
			3D的旋转
				rotateX()
				rotateX()
				rotateZ()
				
			3D的缩放
				scaleX()
				scaleY()
				scaleZ()

transition:; 过渡 需要事件触发