页面切换动画效果4

来源：互联网发布：gta5网络优化编辑：程序博客网时间：2024/04/30 02:22

在线演示

这里写图片描述

html：

<article id="tablet">    <img src="images/05.jpg" alt="tablet">    <h1>Comprehensam</h1>    <p>Tablets, tablets... one for you.</p>    <a href="#wifi">Next</a>  </article>  <article id="wifi">    <img src="images/06.jpg" alt="">    <h1>Adversarium</h1>    <p>Our Tablet Buying Guide ... after all.</p>    <a href="#tablet">Next</a>  </article>

css：

html,body {height: 100%;} body {   margin: 0;   padding: 0;   text-align: center;   color: #fff;   overflow: hidden;   position: relative;   -webkit-perspective: 1500px;   perspective: 1500px; } article {   position: absolute;   top: 0;   width: 100%;   height: 100%;   padding: 100px;   box-sizing: border-box;   -webkit-transition: all 1s ease-in-out;   transition: all 1s ease-in-out;   -webkit-backface-visibility: hidden;   backface-visibility: hidden; } #tablet {   background-color: #4ac4aa;   -webkit-transform: rotateY(0deg);   transform: rotateY(0deg);; } #wifi {   background-color: #ea5634;   -webkit-transform: rotateY(180deg);/* 或者写成 -180deg */   transform: rotateY(180deg);/* 或者写成 -180deg */ } h1 {   font-size: 4em;   border-bottom: 1px solid rgba(255, 255, 255, .2);   padding-bottom: 30px; } p {   color: rgba(255, 255, 255, .8);   margin-bottom: 30px; } a {   font-size: 1.5em;   padding: 5px 50px;   border: 1px solid #fff;   border-radius: 4px;   text-decoration: none;   color: #fff; } #tablet.move {   -webkit-transform: rotateY(180deg);   transform: rotateY(180deg); } #wifi.move {   -webkit-transform: rotateY(0deg);   transform: rotateY(0deg); }

js：

<script>  $(document).ready(function() {    $('a').click(function(e) {      e.preventDefault();      $('#tablet').toggleClass('move');      $('#wifi').toggleClass('move');    });  });</script>

解析：
在3D变换之前首先要为article的父元素，也就是body元素设置3D动画的透视效果，我们设置 perspective属性为1500px，即3D动画中元素距离视图的距离为1500px。
我们制作的目的是将页面沿垂直中轴进行3D旋转，形成翻面效果，当tablet页面翻过去之后，其背面的wifi页面翻到正面并显示。这一动画效果要求翻面后，背面的页面不可见，因此需要将页面的 backface-visibility属性预先设置成hidden，即翻面后隐藏。
接下来，我们为页面的两种状态各自设置相应的3D旋转角度，在此设置页面围绕其Y轴旋转，首次切换时tablet从0度旋转到-180度隐藏起来，wifi页面从180度旋转到0度完成显示切换。

0 0