特别声明:此篇文章内容来源于@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) {