20170916_3D翻转效果

开启前端菜鸟之路。

 

一、思路

  可分为三个部分的设置：组件、动作、效果

  以水平旋转为例，初始状态为正面在前，最终状态为反面在前。在初始状态时就将反面旋转180°，当鼠标滑过平面时，再将反面沿原来的旋转方向再旋转180°，通过“动作”和“效果”实现翻转的目的。

  “组件”包括正面和反面两个平面。正反两面都需要满足的要求是：

1、位置固定

2、尺寸相同

2、背面不可见。假设正面上有文字“front”，若未设置背面不可见，则翻转后会保留镜面的“front”文字。

 

  “动作”指的是从前向后翻转的过程，需要设置：

1、相对位置

2、动作的过渡时间

3、动作类型

 

  “效果”指的是利用perspective属性使3D效果更加逼真。

  “perspective属性定义3D元素距视图的距离，以像素计。perspective属性只影响3D转换元素。”（w3school）

 

 

  以水平翻转的3D效果为例，站在用户面对屏幕向里的视角，类似于画画时“近大远小”的原理，当number值较小时，我们所看到的效果越明显，可以看到在正面转向反面的过程中，整个平面朝向屏幕内的一端向远处延伸，如图1所示（将container的值修改为10，transition的值修改为5s或较长秒数可以观察得更清楚）；当number值无限增大时，效果越不明显，有些类似于直接从前面跳到后面。

 

 

 

（图1）

 

二、注意事项

（一）无论是正面还是反面，都应设置为背面不可见，即设置“backface-visibility:hidden”。

（二）正反面叠加在同一处，因此需要设置堆叠顺序，正面应在反面之上，因此应设置正面的属性为“z-index:2”。

（三）“动作”中反面的旋转方向应与初始时将反面朝下时的旋转方向相同。

（四）水平旋转中的“动作”是"transform:rotateY(180deg)"，垂直旋转中的“动作”是“transform:rotateX(180deg)”。这两个属性的默认值都是transform-origin，即50% 50% 0，即以元素的中心点为基本点进行旋转。在设计“动作”类时，若没有设置其尺寸，则其高度为0，对于水平旋转而言是没有影响的。假设是矩形色块进行旋转，则水平旋转可以看作以矩形上面那条边的中心点为基本点进行旋转，和以整个矩形的中心店为基本点的效果一样。但对于垂直旋转而言，则相当于以矩形上面那条边为轴进行旋转。若要达到以矩形的中心点为基本点进行旋转的效果，则需要将“动作”类的尺寸设置为同矩形色块的尺寸相同。

 

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>3D动态翻转</title>
  <style>
    .container{-webkit-perspective:1000;transform-style:preserve-3d;}
    .container2{-webkit-perspective:1000;transform-style:preserve-3d;}
    .container,.front,.back,.up,.down{width:250px;height:250px;}
    .flip{position:relative;transition:1.0s;transform-style:preserve-3d;}
    .flip2{position:relative;transition:1.0s;transform-style:preserve-3d;}
    .flip2{width:250px;height:250px;}
    .front,.back,.up,.down{position:absolute;top:0px;left:0px;backface-visibility:hidden;}
    .front{background-color:red;z-index:2;}
    .back{background-color:yellow;transform:rotateY(180deg);}
    .up{background-color:blue;z-index:2;}
    .down{background-color:green;transform:rotateX(180deg);}
    .container:hover .flip{transform:rotateY(180deg);}
    .container2:hover .flip2{transform:rotateX(180deg);}
</style>
</head>

<body>
<div class="container">
  <div class="flip">
    <div class="front">front</div>
    <div class="back">back</div>
  </div>
</div>

<div class="container2">
  <div class="flip2">
    <div class="up">up</div>
    <div class="down">down</div>
  </div>
</div>

</body>
</html>

 

posted @ 2017-09-16 16:36  卷卷卷卷  阅读(94)  评论(0)    收藏  举报