H5移動端開發基礎（二）適配、3D、animation
阿新 • • 發佈：2019-01-09
適配、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**用於獲取某個元素相對於視窗的位置集合。集合中有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>