使用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) {
    update(event);
}

var onMouseLeaveHandler = function () {
    inner.style = '';
}

var onMouseMoveHandler = function (event) {
    if (isTimeToUpdate()) {
        update(event);
    }
}

container.onmouseenter = onMouseEnterHandler;
container.onmouseleave = onMouseLeaveHandler;
container.onmousemove = onMouseMoveHandler;

这些事情是我们要做或者将要做的事情：

• 事件功能（Handler Functions）：这些函数是在事件发生时要处理的事件。我们想要决定当鼠标进入、移动和离开容器时会发生什么，因此每个容器都有一个处理函数
• 更新功能：我们现在还没有给这个函数添加任何代码，但是它的目的是更新#inner元素的有关于3D旋转相关的样式
• 更新函数的时间：这是另一个还没有编码的函数，但是当需要更新时它会返回true。这是一种方法，可以减少对update()函数的调用次数，并提高脚本的性能
• 事件（Event）：这是一个JavaScript对象，描述发生的事件

上面的代码做的事情是：

• 鼠标移入容器#container时，更新div#inner的3D旋转属性
• 鼠标在容器#container移动时，更新内部div#inner的3D旋转属性
• 鼠标离开容器#container时，重置div#inner的样式

是时候更新了吗？

让我们添加决定何时更新div#inner的3D旋转。

var counter = 0;
var updateRate = 10;
var isTimeToUpdate = function () {
    return counter++ % updateRate === 0;
}

当计数器（counter）到达updateRate时，将进行更新。

在这一点上，你可以尝试使用console.log()来替换update函数，并使用updateRate来查看它是如何一起工作的。

鼠标

接下来是鼠标对象。这个比其他部分要更复杂一些。尽管如此，理解起来并不是那么困难，但是代码看起来很吓人，特别是如果你是JavaScript新手的话。

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

// 鼠标对象
var mouse = {
    _x: 0,
    _y: 0,
    x: 0,
    y: 0,
    updatePosition: function (event) {
        var e = event || window.event;
        this.x = e.clientX - this._x;
        this.y = (e.clientY - this._y) * -1;
    },
    setOrigin: function (e) {
        this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
        this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
    },
    show: function () {
        return '(' + this.x + ',' + this.y + ')'
    }
}

mouse.setOrigin(container);

让我们一起来讨论这个问题。

• show()：显示鼠标的当前位置
• setOrigin(e)：在element(e)的中心设置鼠标对象的坐标coordinates(0,0)
• updatePosition()：相对于(0,0)更新鼠标对象的当前位置

最后一行代码mouse.setOrigin(container)将鼠标对象的coordinates(0,0)设置在容器的中心。这里有一个例子说明了这一点。

(function(){
    var container = document.getElementById('container'),
        inner = document.getElementById('inner'),
        helper = document.getElementById('helper');
    console.log(container);

    var mouse = {
        _x: 0,
        _y: 0,
        x: 0,
        y: 0,
        updatePosition: function (event) {
            var e = event || window.event;
            this.x = e.clientX - this._x;
            this.y = (e.clientY - this._y) * -1;
        },
        setOrigin: function (e) {
            this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
            this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
        },
        show: function () {
            return '(' + this.x + ',' + this.y + ')';
        }
    }
    mouse.setOrigin(container);

    var counter = 0;
    var updateRate = 1;
    var isTimeToUpdate = function () {
        return counter ++ % updateRate === 0;
    };

    var onMouseEnterHandler = function (event) {
        helper.className = '';
        update(event);
    }

    var onMouseLeaveHandler = function () {
        inner.style = '';
        helper.className = 'hidden';
    }

    var onMouseMoveHandler = function (event) {
        if (isTimeToUpdate()) {
            update(event);
        }
        displayMousePositionHelper(event);
    }

    var update = function (event) {
        mouse.updatePosition(event);
    }

    var displayMousePositionHelper = function (event) {
        var e = event || window.event;
        helper.innerHTML = mouse.show();
        helper.style = 'top:' + (e.clientY - container.offsetTop) + 'px;left:' + (e.clientX - container.offsetLeft) + 'px;'; 
    }

    container.onmouseenter = onMouseEnterHandler;
    container.onmouseleave = onMouseLeaveHandler;
    container.onmousemove = onMouseMoveHandler;
})();

我样想要的是，当你把鼠标移动离容器中心点更远的地方时，那么div#inner旋转的幅度也将更大。

更新鼠标位置的样式

这是update()函数里的代码：

var update = function (event) {
    mouse.updatePosition (event);
    updateTransformStyle(
        (mouse.y / inner.offsetHeight / 2).toFixed(2),
        (mouse.x / inner.offsetWidth / 2).toFixed(2)
    )
}

var updateTransformStyle = function (x, y) {
    var style = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
    inner.style.transform = style;
    inner.style.webkitTransform = style;
}

• update()：更新鼠标位置和更新div#inner的样式
• updateTransformStyle()：更新每个供应商前缀的样式

我们做了什么？

我们最好做些测试！看起来，当鼠标进入并退出卡片时，我们的perspective会发生变化，但它并不像我们想象的那么平滑。

(function(){
    var container = document.getElementById('container'),
        inner = document.ElementBt.Id('inner');
    
    var mouse = {
        _x: 0,
        _y: 0,
        x: 0,
        y: 0,
        updatePosition: function (event) {
            var e = event || window.event;
            this.x = e.clientX - this._x;
            this.y = (e.clientY - this._y) * -1;
        },
        setOrigin: function (e) {
            this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
            this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
        },
        show: function () {
            return '(' + this.x + ',' + this.y + ')';
        }
    };

    mouse.setOrigin(container);

    var counter = 0;
    var updateRate = 10;
    var isTimeToUpdate = function () {
        return counter++ % updateRate === 0;
    };

    var onMouseEnterHandler = function (event) {
        update(event);
    };

    var onMouseLeaveHandler = function () {
        inner.style = '';
    };

    var onMouseMoveHandler = function (event) {
        if (isTimeToUpdate()) {
            update(event);
        }
    };

    var update = function (event) {
        mouse.updatePosition(event);
        updateTransformStyle(
            (mouse.y / inner.offsetHeight / 2).toFixed(2),
            (mouse.x / inner.offsetWidth / 2).toFixed(2)
        );
    };

    var updateTransformStyle = function (x, y) {
        var style = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
        inner.style.transform = style;
        inner.style.webkitTransform = style;
    }

    container.onmouseenter = onMouseEnterHandler;
    container.onmouseleave = onMouseLeaveHandler;
    container.onmousemove = onMouseMouveHandler;
})();

每次计数器（counter）刷新updateRate时更新div#inner的旋转值。这在更新之间产生了迟钝的transform效果。

如何破这个局呢？可以使用CSS的transition。

添加transition效果

#inner {
    transition: transform 0.5s;
}

这些都是任意数字。你可以使用perspective和transform的值，使效果或多或少地达到你认为合适的效果。

注意，调整页面大小会导致一些问题，因为页面中容器的位置发生了变化。解决方案是在页面大小调整后将鼠标对象（mouse）重新放到容器（container）中。

CSS 自定义属性

到整理这文章之时，CSS的自定义属性（CSS变量）得到了众多浏览器的支持，对于文章开头演示的效果，我们可以尝试使用CSS的自定义属性来实现，这将会让事情变得更为简单。这里来看一个简单的示例。

使用CSS自定义变量，需要先声明相关的CSS变量，这里我们需要控制的是鼠标x和y的坐标，所以我们先在:root中声明对应的两个变量名，并且设置其默认值为0：

:root {
    --mouseX: 0deg;
    --mouseY: 0deg;
}

和前面示例一样，在#container容器中设置perspective的值，这个值根据自己想要的效果可以进行调整，另外在这个容器中使用perspective-origin设置perspective的中心点为容器的中心。与前面示例不同的是，#inner是的transform是通过JavaScript对应的鼠标事件来控制，而我们的示例中在样式中调用CSS的自定义变量，然后再通过JavaScript的.setProperty()来控制调用的变量值。先来看CSS部分的代码：

#inner {
    transform: rotateX(calc(var(--mouseY)))
    rotateY(calc(var(--mouseX)));
    transition-origin: center;
    transition: transform 0.5s;
    box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.2);
}

添加对应的几个JavaScript对应的鼠标事件，相比之下，这个代码变得更简单多了，代码量也少了：

(function(){
    var container = document.getElementById('container'),
        inner = document.getElementById('inner');
    
    var counter = 0;
    var refreshRate = 10;
    var isTimeToUpdate = function() {
        return counter++ % refreshRate === 0;
    };
    
    var updateTransformStyle = function (xPos, yPos) {
        var wh = window.innerHeight / 2,
            ww = window.innerWidth / 2;
        inner.style.setProperty('--mouseX', (xPos - ww) / 300 + 'deg');
        inner.style.setProperty('--mouseY', (yPos - wh) / 300 + 'deg');
    }
    
    var onMouseEnterHandler = function(event) {
        updateTransformStyle(event.clientX,event.clientY);
    };
    
    var onMouseMoveHandler = function (event) {
        if (isTimeToUpdate()) {
            updateTransformStyle(event.clientX,event.clientY);
        }
    }
    
    var onMouseLeaveHandler = function() {
        inner.style = "";
    };
    
    var onTouchMoveHander = function (event) {
        event.preventDefault();
        var touch = event.targetTouches[0];
        if (touch) {
            updateTransformStyle(touch.pageX, touch.pageY);
        }
    }
    
    container.onmousemove = onMouseMoveHandler;
    container.ontouchmove = onTouchMoveHander;
    container.onmouseleave = onMouseLeaveHandler;
})()

最终的效果如下：

总结

现在我们完成了想要的效果。我们有了一个容器来让元素变得更具交互性。本文开头演示的效果中加入了图片，但是除了图像之外，它还可以用于其他任何你想要的东西，包括表单，Modal弹出框或者你想要的其他任何内容。感兴的同学，不仿试试！

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.fedev.cn/css/animate-a-container-on-mouse-over-using-perspective-and-transform.htmlnike air max 1 kids