H5移动端开发基础（二）适配、3D、animation

适配

适配：各个移动设备，分辨率大小不一致，使我们的页面在各种分辨率下都显示完好（等比缩放）；
根据屏幕的分辨率，动态的设置html的字体大小，达到页面的等比缩放。
注意：保证html最终算出来的字体大小不能小于12px

rem适配

<meta name="viewport" content="width=device-width, user-scalable=no"/>
(function(){
	var html = document.querySelector('html');
	var width = html.getBoundingClientRect().width;
	// console.log(width);
	html.style.fontSize = width/16 + 'px';
	// html字体大小 = 屏幕宽度的16分之一 = 1rem 
	console.log(html.getBoundingClientRect());
})();

getBoundingClientRect

**getBoundingClientRect**用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1）语法：这个方法没有参数。
rectObject = object.getBoundingClientRect();
2）返回值类型：TextRectangle对象，每个矩形具有四个整数性质（上， 右 ， 下，左）表示的坐标的矩形，以像素为单位。
	rectObject.top：元素上边到视窗上边的距离；
	rectObject.right：元素右边到视窗左边的距离；
	rectObject.bottom：元素下边到视窗上边的距离；
	rectObject.left：元素左边到视窗左边的距离。

viewport适配

1)页面宽度定死，例如：320
2)动态设置 viewport 把可视区的宽度设置成320
	width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
	height：和 width 相对应，指定高度。
	initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
	maximum-scale：允许用户缩放到的最大比例。
	minimum-scale：允许用户缩放到的最小比例。
	user-scalable：用户是否可以手动缩放。

var width = window.screen.width;
var targetW = 320;
var scale = width/targetW;
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale='+scale+', minimum-scale='+scale+', maximum-scale='+scale);
document.head.appendChild(meta);
/*
设置了viewport默认就是device-width，不设置viewport默认就是980(document.querySelector('html').getBoundingClientRect().width=980)
*/

横竖屏适配

方法一

<meta name="viewport" content="width=device-width, user-scalable=no"/>
window.addEventListener('orientationchange', function(){
	setRem();
});
function setRem(){
	var html = document.querySelector('html');
	var width = html.getBoundingClientRect().width;
	console.log(width)
	html.style.fontSize = width/16 + 'px';
}

方法二

// window.orientation 屏幕方法 0 ±90 180 度
// alert(window.orientation)
// var width = window.screen.width;
var width = (window.orientation==90||window.orientation==-90)
			? window.screen.height
			: window.screen.width
var targetW = 320;
var scale = width/targetW;
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale='+scale+', minimum-scale='+scale+', maximum-scale='+scale);
document.head.appendChild(meta);

window.addEventListener('orientationchange', function(){
	setTimeout(function(){
		alert(window.screen.width);
		// window.location.reload();
		window.location.href = window.location.href;
	}, 600);
});

3D

1）旋转 rotate
	rotateX
	rotateY
	rotateZ
2）位移 translate
	translateX
	translateY
	translateZ
	translate3D()

旋转正方体

#box {
  width: 100px;
  height: 100px;
  padding: 100px;
  border: 5px solid #000;
  /* 透视/景深 */
  perspective: 200px;
  /* 景深基点（视觉方向） */
  /*perspective-origin: center center;*/
  perspective-origin: center center;
  margin: 100px auto;
  background: url(img/bg.jpg);
}
#div {
  position: relative;
  width: 100px;
  height: 100px;
  /*background: red;*/
  transition: 2s;
  transform-style: preserve-3d;
  transform-origin: center center -50px;
}
#box:hover #div {
  /*transform: rotateX(360deg);*/
  transform: rotateY(360deg);
  /*transform: rotateZ(360deg);*/
  /*transform: translateZ(100px);*/
  /* 变换基点 center(x) center(y) 0 */
  /*transform-origin: center center 0;*/
  /*transform-origin: center top 0;*/
  /*transform-origin: center 100px 0;*/
}
#box:hover #div {
  transform: rotateY(-360deg);
}
#div span{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  font: 50px/100px '宋体';
  color: #fff;
  text-align: center;
  transform-origin: center center -50px;
  opacity: .5;
  backface-visibility: hidden;
}
#div span:nth-of-type(1){background: #f60;}
#div span:nth-of-type(2){background: #6f0;transform: rotateY(90deg)}
#div span:nth-of-type(3){background: #0f6;transform: rotateY(180deg)}
#div span:nth-of-type(4){background: #06f;transform: rotateY(270deg)}

<div id="box">
  <div id="div">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</div>

3D旋转切换

#box {
  width: 400px;
  height: 200px;
  padding: 100px;
  border: 5px solid #000;
  /* 透视/景深 */
  perspective: 800px;
  /* 景深基点（视觉方向） */
  perspective-origin: center center;
  margin: 100px auto;
}
#div {
  position: relative;
  width: 400px;
  height: 200px;
  transition: 2s;
  transform-style: preserve-3d;
  transform-origin: center center 0px;
}
#box:hover #div {
  transform: rotateY(360deg);
}
#box:hover #div {
  transform: rotateY(-180deg);
}
#div span{
  display: block;
  transform: translateZ(100px);
  width: 100px;
  margin: 0 auto;
  backface-visibility: hidden;
}
#div div{
  width: 400px;
  height: 200px;
  position: absolute;
  left: 0;
  right: 0;
  font: 50px/100px '宋体';
  /*color: #fff;*/
  text-align: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
#div div:nth-of-type(1){background: #ccc;}
#div div:nth-of-type(1) span{background: #f60;}
#div div:nth-of-type(2){background: #6f0;transform: rotateY(180deg)}
#div div:nth-of-type(2) span{background: red}

<div id="box">
  <div id="div">
    <div>
      <span>1</span>
    </div>
    <div>
      <span>2</span>
    </div>
  </div>
</div>

三棱柱

#box {
  width: 100px;
  height: 100px;
  padding: 100px;
  border: 5px solid #000;
  /* 透视/景深 */
  perspective: 200px;
  /* 景深基点（视觉方向） */
  perspective-origin: center center;
  margin: 100px auto;
}
#div {
  position: relative;
  width: 100px;
  height: 100px;
  transition: 2s;
  transform-style: preserve-3d;
  transform-origin: center center -28.87px;
}
#box:hover #div {
  transform: rotateY(360deg);
}
#div span{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  font: 50px/100px '宋体';
  color: #fff;
  text-align: center;
  transform-origin: center center -28.87px;
  backface-visibility: hidden;
}
#div span:nth-of-type(1){background: #000;transform: rotateY(0deg)}
#div span:nth-of-type(2){background: #6f0;transform: rotateY(120deg)}
#div span:nth-of-type(3){background: #0f6;transform: rotateY(240deg);}

<div id="box">
	<div id="div">
		<span>1</span>
		<span>2</span>
		<span>3</span>
	</div>
</div>

多棱柱

#box {
  width: 100px;
  height: 100px;
  padding: 100px;
  border: 5px solid #000;
  /* 透视/景深 */
  perspective: 200px;
  /* 景深基点（视觉方向） */
  perspective-origin: center center;
  margin: 100px auto;
}
#div {
  position: relative;
  width: 100px;
  height: 100px;
  transition: 5s;
  transform-style: preserve-3d;
}
#box:hover #div {
  transform: rotateY(-360deg);
}
#div span{
  position: absolute;
  left: 0;
  right: 0;
  width: 98px;
  height: 98px;
  font: 50px/100px '宋体';
  color: #fff;
  text-align: center;
  background: #ccc;
  border: 1px solid #000;
}

<div id="box">
	<div id="div"></div>
</div>

// 正N边形的外角和 = 360°
// 正N边形外角 = 360°/N
window.onload = function(){
  var oDiv = document.getElementById('div');
  var html = '';
  var width = 100;
  var n = 10;
  var deg = 360/n;
  var center = -Math.tan((180-deg)/2*Math.PI/180)*(width/2).toFixed(4);
  for(var i=0; i< n; i++){
    html += '<span style="transform-origin: center center '+center+'px;transform: rotateY('+ deg*i +'deg); ">'+i+'</span>';
  }
  oDiv.innerHTML = html;
  oDiv.style.transformOrigin = 'center center ' + center + 'px';
}

案例-3D桌面切换

html{
	height: 100%;
}
body{
	margin: 0;
	height: 100%;
}
ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
#wrap{
	height: 100%;
}
#header{
	height: 4.0625%;
	background: url(img/img1.png) no-repeat;
}
.content{
	height: 76.3542%;
	/*background: url(img/img2.png) no-repeat;*/
	background: #000;
	perspective: 300px;
	-webkit-perspective: 300px;
}
.content li{
	width: 25%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	position: relative;
	float: left;
}
.content div{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}	
.content span{
	display: block;
	width: 100%;
	height: 25%;
	/*border: 1px solid #fff;*/
	border: 1px solid #000;
	box-sizing: border-box;
}
.content div:nth-of-type(1) span{
	background-image: url(img/img1.png);
}
.content div:nth-of-type(2) span{
	background-image: url(img/img2.png);
}
.content div:nth-of-type(3) span{
	background-image: url(img/img3.png);
}
#footer{
	height: 19.5833%;
	background: url(img/img3.png) no-repeat 0 bottom;
}

<div id="wrap">
	<header id="header" class="bg"></header>
	<ul class="content">
		<li>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
		</li>
		<li>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
		</li>
		<li>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
		</li>
		<li>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
			<div><span class="bg"></span><span class="bg"></span><span class="bg"></span><span class="bg"></span></div>
		</li>
	</ul>
	<footer id="footer" class="bg"></footer>
</div>

document.addEventListener('touchstart', function(e){
	e.preventDefault();
})
window.onload = function(){
	// 设置每个li里的每个span（每一个功能图标）的图片位置
	var lis = document.querySelectorAll('.content li');
	for(var i=0;i<lis.length;i++){
		var left = lis[i].getBoundingClientRect().left+1;
		var oSpan = lis[i].getElementsByTagName('span');
		for(var j=0;j<oSpan.length;j++){
			var top = oSpan[j].getBoundingClientRect().top;
			oSpan[j].style.backgroundPosition = '-'+left+'px -'+top+'px';
		}
	}
	// 设置旋转轴、及其位置
	var html = document.querySelector('html');
	var htmlRect = html.getBoundingClientRect();
	var z = (Math.tan(30*Math.PI/180)*(htmlRect.width/8)).toFixed(4);
	for(var i=0;i<lis.length;i++){
		cssTransform(lis[i], 'translateZ', -z);
		cssTransform(lis[i], 'rotateY', 0);
	}
	// 滑屏旋转操作
	var deg = 120;
	var startDeg = 0;
	var startPoint = 0;
	var content = document.querySelector('.content');
	content.addEventListener('touchstart', function(e){
		startPoint = e.changedTouches[0].pageX;
		startDeg = cssTransform(lis[0], 'rotateY');
		for(var i=0;i<lis.length;i++){
			lis[i].style.transition = 'none';
		}
	});
	content.addEventListener('touchmove', function(e){
		var dis = e.changedTouches[0].pageX-startPoint;
		var disDeg = dis/htmlRect.width*deg;
		for(var i=0;i<lis.length;i++){
			cssTransform(lis[i], 'rotateY', startDeg+disDeg);
		}
	});
	content.addEventListener('touchend', function(e){
		var nowDeg = cssTransform(lis[0], 'rotateY');
		var now = (-Math.round(nowDeg/deg));
		// now = now<0 ? (3+now) : now; 
		for(var i=0;i<lis.length;i++){
			lis[i].style.transition = '.5';
			cssTransform(lis[i], 'rotateY', -now*deg);
		}
	});
	// 3D变换也会影响到图片的绝对定位位置，所以要放到最后设置
	toCss();
}
function toCss(){
	var html = document.querySelector('html');
	var htmlRect = html.getBoundingClientRect();
	var z = (Math.tan(30*Math.PI/180)*(htmlRect.width/8)).toFixed(4);
	var css = document.querySelector('#css');
	var style = '.bg{background-size:'+htmlRect.width+'px '+htmlRect.height+'px !important;}';
	style += '.content li{-webkit-transform: translateZ(-'+z+'px) rotateY(0deg);transform: translateZ(-'+z+'px) rotateY(0deg);}';
	for(var i=0;i<3;i++){
		style += '.content div:nth-of-type('+(i+1)+'){-webkit-transform: rotateY('+(i*120)+'deg) translateZ('+z+'px);transform: rotateY('+(i*120)+'deg) translateZ('+z+'px);}'
	}
	css.innerHTML += style; 
}

animation动画

@keyframes move{
		/*动画开始*/
		0%{ width: 100px; }
		50%{ width: 600px; }
		/*动画结束*/
		100%{ width: 300px; }
	}
animation: 2s move 1s 10 alternate linear;
	2s：动画时间
	move：调用那个关键帧
	1s：延迟时间
	10：执行次数，无效次数：infinite
	alternate：偶次执行的顺序
	linear：动画的形式
暂停
	animation-play-state: paused;

案例-loading

@keyframes move{
	0%{
		top: 0;
	}
	100%{
		top: 10px;
	}
}
@-webkit-keyframes move{
	0%{
		top: 0;
	}
	100%{
		top: 10px;
	}
}
#box{
	width: 200px;
	height: 200px;
	background: grey;
	border: 1px solid #000;
	font-size: 20px;
	color: #fff;
}
#box span{
	position: relative;
	animation: .2s move linear infinite alternate;
}

<div id="box">
	<span>l</span>
	<span>o</span>
	<span>a</span>
	<span>d</span>
	<span>i</span>
	<span>n</span>
	<span>g</span>		
</div>

window.onload = function(){
	var oSpan = document.querySelectorAll('#box span');
	for(var i=0; i<oSpan.length; i++){
		oSpan[i].style.WebkitAnimation = oSpan[i].style.animation = '.2s '+(i*50)+'ms move linear infinite alternate';
	}
}