css 3D 翻页效果

最新推荐文章于 2024-11-04 15:03:12 发布

转载最新推荐文章于 2024-11-04 15:03:12 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2612473/blog/880797

本文介绍如何使用CSS3属性如perspective、transform-style等创建3D翻页效果，并通过JavaScript控制页面切换。提供了完整的代码示例。

2019独角兽企业重金招聘Python工程师标准>>>

最近在慕课网上学习css3的3D效果，主要用到perspctive,perspective-origin transform-style:presersve-3d,

perspective：800 主要是创造一个3D场景,800指的是从屏幕看3D场景的距离，其子元素会获得透视效果，而不是元素本身

perspective-origin：50% 50% 看3D场景的位置，从正中心观看,默认（50% 50%）

transform-style:presersve-3d 使被转换的子元素保留其3D转换

transform-origin: x-axis y-axis z-axis，默认（50%,50%,0）

 <div class="my3dspace">
 	<div class="pagegroup">
 		<div class="page" id="page1">1</div>
 		<div class="page" id="page2">2</div>
 		<div class="page" id="page3">3</div>
 		<div class="page" id="page4">4</div>
 		<div class="page" id="page5">5</div>
 		<div class="page" id="page6">6</div>
 	</div>

 </div>
 <a href="javascript:next();">next</a> <a href="javascript:pre();">pre</a>

.my3dspace{-webkit-perspective:800;overflow:hidden;}
.pagegroup{width:400px;height:400px;margin:0 auto;-webkit-transform-style:preserve-3d;position:relative;}
.page{position:absolute;width:360px;height:360px;padding:20px;box-sizing:content-box;font-size:100px;text-align:center;line-height:380px;background:#333;color:#fff;}
#page1{-webkit-transform-origin:bottom;-webkit-transition:-webkit-transform 1s linear;}
#page2, #page3, #page4, #page5, #page6{-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);-webkit-transition:-webkit-transform 1s linear;}

<script>
var curindex=1
function next(){
  if(curindex==6) return;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(-90deg)";
  curindex++;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(0deg)";
}
function pre(){
 if(curindex==1) return;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(90deg)";
  curindex--;
  var curentElement=document.getElementById("page"+curindex);
  curentElement.style.webkitTransform="rotateX(0deg)";
	
}

</script>

转载于:https://my.oschina.net/u/2612473/blog/880797