移动端 第十二章 3d

transform-origin:基点(旋转中心点)
定义x轴的写法 :left/center/right/length/%
定义Y轴的写法 :top/center/bottom/20px/50%
transform-origin:x y;
css:

<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 100px auto;
				transition: 1s;
				/*基点就是元素旋转的中心点*/
				/*transform-origin: left top;*/
				/*transform-origin: left bottom;*/ 
				/*transform-origin: left;*/ 
				/*transform-origin: center;*/ 
				/*transform-origin: right bottom;*/  
				/*像素写法*/
				/*transform-origin:0 0  ;*/
				/*transform-origin:200px 200px  ;*/
				/*百分比*/
				/*transform-origin:0 100% ;*/
				/*transform-origin:100% 0% ;*/
				/*transform-origin:50% 0;*/
			}
			div:hover{
				transform:rotate(160deg)
			}
		</style>

html:

<div>1212</div>

等价写法
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);
3d属性:
transform-style:把2D转换成3D/ preserve-3d;
perspective: 像素px;(景深的值越小，用户的视觉就在元素的里面，值越大，用户的视觉就在元素的外面)
perspective 属性定义 3D 元素视图的距离，以像素计。
当元素定义 perspective 属性时，其子元素会获得透视效果
perspective翻译过来叫 景深
css:

<style type="text/css">
			.wrap{
				width: 200px;
				height: 300px;
				border: 1px solid red;
				margin: 100px auto;
				position: relative;
				/*把父元素变成3d环境*/
				transform-style: preserve-3d;
				/*景深*/
				perspective: 1px;
			}
			.box{
				width: 190px;
				height: 290px;
				background: red;
				position: absolute;
				top:5px;
				left:5px;
				transition: 1s;			
			}
			.box:hover{
				transform:rotateX(7360deg) rotateY(7760deg) rotateZ(7960deg)
			}
		</style>

html:

<div class="wrap">
		<div class="box">1212</div>
</div>