一、知识点
1、em && rem && vw/vh
em：根据当前样式里面定义的font-size大小来计算，如当前样式里面没定义font-size，那么就根据父级上的font-size大小来计算
如：
.box{
font-size:20px; //此时1em=20px
height:20em; //那么，20em=400px，也就是height:400px
}
rem：只根据html上的font-size大小进行变化
html上的font-size大小需要动态计算，计算方式有2种：
a. 通过js获取窗口大小
b. vm/vh( 100vw=当前窗口的大小 )
vw：根据当前视口的宽度来计算
100vw：代表整个屏幕宽度，也就是把屏幕宽度分成了100个格子，在414px的情况下，每个格子占据4.14px
100vh：代表整个屏幕高度
如：以一张图片414*182为例
设置：html{ font-size:4vw; } //即等价于html{ font-size:16.56px 414/100*4=16.56}
.img{ height:182/16.56rem;width:100%; }
这样也可以通过动态计算html的font-size大小，来动态设置元素的样式
2、零碎知识点：
遇见div嵌套的，子级加margin会导致父级div往下，可以给父级div加border，这样就不会导致父级div往下，而只有子级div往下了。
变形元素：进行transfrom:3d变形的元素，主要进行transform、transform-origin、backface-visibility等属性的设置；
观察者：浏览器模拟出来的用来观察被透视元素的一个没有尺寸的点，观察者发出视线，类似于一个点光源发出光线
被透视元素：也就是被观察者观察的元素，根据属性设置的不同，它有可能是变形元素本身，也有可能是它的父级或祖先元素，主要进行perspective、perspective-origin等属性的设置。
perspective：景深——近大远小，给变形元素的父级加，属性值表示眼睛到物体的距离
用法：perspective:500px;加了就是3D的效果，不加就是2D
transfrom-style:preserve-3d; //避免子集元素的3D变化受到影响，加给变化元素的父级
只要看见相同的物体，由近及远，物体慢慢变小，说明就用到了景深
视线3D效果的步骤：
a. 建立父级
加属性：
perspective: 800px; //景深，眼睛到物体的距离，近大远小
transform-style: preserve-3d; //视线3D舞台效果
perspective-origin:50% 50%; //观察者的位置，默认是中心位置( 50% 50% )
b. 子级-也就是变形元素：scale缩放 rotate旋转 translate移动 skew倾斜 通过这些来进行3d效果，都是X、Y、Z三个方向
transform-origin：设置 transform 变换的基点位置。默认情况下基点位置为元素的中心点。加在子级元素上。
transform:translateZ(-60px); //translateZ为负值，表示元素后退(相当于为值为0的元素而言)
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>移动端滑屏</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
html{
font-size: 4vw;/*16.56px*/
}
.header{
position: absolute;
left: 0;
top: 0;
width: 100%;
height:10.99033816425121rem ;
background: url(img/title.png) no-repeat;
background-size:100% 100%;
}
.card{
height: 100%;
width: 100%;
position: relative;
perspective: 500px;
overflow: hidden;
}
.box{
height: 20rem;
width: 20rem;
position: absolute;
bottom: 4rem;
left: 50%;
transform: translateX(-50%);
transform-style: preserve-3d;
}
.box div{
position: absolute;
left: 0;
top: 0;
transform-origin: -300px -60px;
}
.box div img{
border-radius: 2rem;
border: 1px solid #000;
box-shadow: 3px 3px 3px rgba(0,0,0,.2);
border: 1px solid #000;
vertical-align: middle;
}
/*.box div:nth-of-type(2){
transform: rotate(-10deg) translateZ(-60px);
}
.box div:nth-of-type(3){
transform: rotate(-20deg) translateZ(-120px);
}
.box div:nth-of-type(4){
transform: rotate(-30deg) translateZ(-180px);
}
.box div:nth-of-type(5){
transform: rotate(-40deg) translateZ(-240px);
}
.box div:nth-of-type(6){
transform: rotate(-50deg) translateZ(-300px);
}
.box div:nth-of-type(7){
transform: rotate(-60deg) translateZ(-360px);
}*/
</style>
</head>
<body>
<header class="header"></header>
<div class="card">
<div class="box">
<div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/card1.jpg" alt="" /></div>
<div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/card2.jpg" alt="" /></div>
<div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/card3.jpg" alt="" /></div>
<div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/card4.jpg" alt="" /></div>
<div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/card5.jpg" alt="" /></div>
<div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/card6.jpg" alt="" /></div>
<div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/card7.jpg" alt="" /></div>
</div>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var oBox = $(".box");
var aDiv = $(".box div");
var positionArr = [];
var now = 0;
var off = true;
var startX,disX = 0;
init();
function init(){
aDiv.each((index,elem)=>{
$(elem).css({"transform":"rotate(-"+10*index+"deg) translateZ(-"+60*index+"px)"});
positionArr.push([10*index,60*index]);
})
}
aDiv.on("touchstart",function(e){
startX = e.originalEvent.targetTouches[0].pageX;
})
aDiv.on("touchmove",function(e){
disX = e.originalEvent.targetTouches[0].pageX -startX;
if(Math.abs(disX)>100){
if(!off){
return
}
off = false;
aDiv.eq(now).css({"transition":"0.5s,opacity .1s .1s","transform":"rotateY(-20deg) translateX(-500px)","opacity":"0"});
positionArr.unshift(positionArr.pop());
aDiv.each((index,elem)=>{
if(now==index){
return;
}
$(elem).css({"transition":"0.5s,opacity .1s .3s"});
$(elem).css("opacity","1");
$(elem).css({"transform":"rotate(-"+positionArr[index][0]+"deg) translateZ(-"+positionArr[index][1]+"px)"});
})
now++;
if(now == aDiv.length){
now = 0;
}
setTimeout(()=>{
off = true
},300)
}
})
</script>
</body>
</html>
©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任
共同学习，写下你的评论
评论加载中...
作者其他优质文章
