页面切换动画效果4 - 3D切换_前端页面3d切换特效-优快云博客

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/71419820

本文介绍了如何创建3D页面切换动画，通过设置body的perspective属性为1500px来实现3D效果，利用backface-visibility属性隐藏翻面后的内容。页面在切换时围绕Y轴旋转，tablet页面从0度旋转到-180度，而wifi页面从180度旋转到0度，完成翻面展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示

这里写图片描述

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度完成显示切换。