使用perspective和transform实现容器上的悬浮效果

特别声明：此篇文章内容来源于@MIHAI IONESCU的《Animate a Container on Mouse Over Using Perspective and Transform》一文。

我一直在做一个网站，这个网站主要用来向用户展示大型图片。我没有创建一个典型的Lightbox效果，而是尝试让一些交互效果更有意思。最后的效果是我在一个容器上添加了一个效果，当用户把鼠标悬浮在图片（用户鼠标移动图片上）时，它会倾斜（鼠标移动到不同的角度时，向不同的方向倾斜）。

最终的效果如下：

这个效果是通过CSS和JavaScript实现的。我想通过这个教程来解释每个部分是如何工作的，这样你就可以很容易地复杂或者扩展它。

在开始之前，我建议你阅读一下perspective和transfrom相关的教程。在这篇文章中介绍的效果将会使用这些属性，熟悉它们有助于你更好的理解下面的内容。

那我们开始今天的教程学习吧。

设置

首先我们需要在一个容器中放置一个元素。这个容器将有助于我们使用perspective属性。

<div id="container">
    <div id="inner"></div>
</div>

为了演示的目的，把卡片放在屏幕的正中：

body {    
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: rgb(220, 220, 220);
}

#container {    
    perspective: 40px;
}

#inner {    
    width: 20em;
    height: 18em;
    background-color: white;
}

我们创建了一张白色的卡片，它位于屏幕（浅灰色背景）的正中（水平垂直居中于屏幕）。注意，我们给#container设置了perspective的值为40px。在这一点上我们什么也没有做，因为我们没有创建任何transform。这将在稍后的JavaScript中处理。

(function(){    // 初始化
    var container = document.getElementById('container'),
        inner = document.getElementById('inner');
})()

开始添加JavaScript脚本

下面将是我们需要的一些功能：

var container = document.getElementById('container'),
    inner = document.getElementById('inner');

var onMouseEnterHandler = function (event) {