CSS：让 transform/transform-origin 一起做一个平滑/直观的过渡

问题描述

我想在交互式 Web 应用程序中使用鼠标一次更改缩放中心和缩放比例。在我添加 CSS 过渡时间以使其看起来平滑之前，它一直有效。我尝试了两种变体：1：分别用 transform-origin 设置缩放中心，2：缩放比例和中心都设置在 transform 中。在第一种情况下，Chrome 中的效果是锯齿状的。另一方面，它做一个来回的事情。

第一个变体的缩放示例：

div {
    width: 400px;
    height: 267px;
    border: 1px solid black;
    background-image: url('http://i.imgur.com/n9q7jhm.jpg');
    background-size: 400px 267px;
    transition: all 1s ease;
    transform-origin: 0px 0px;
    transform: scale(1.2);
    
}

div:hover{
    transform-origin: 400px 267px;
    transform: scale(2);
}

看起来 transform-origin 是在最后突然应用的。小提琴：http://jsfiddle.net/o5j6h09z/

与第二个变体相同的缩放：

div {
    width: 400px;
    height: 267px;
    border: 1px solid black;
    background-image: url('http://i.imgur.com/n9q7jhm.jpg');
    background-size: 400px 267px;
    transition: all 1s ease;
    transform: translate(-200px,-134px) scale(1.2) translate(200px,134px);
   
}

div:hover{
    transform: translate(200px,134px) scale(2.0) translate(-200px,-134px);
}

有一种可见的转弯而不是直接的过渡。图像的点来回移动。小提琴：http://jsfiddle.net/o5j6h09z/2/

是否可以使用 CSS 使这样的转换顺利且直观地协同工作？在第二个变体中进行很多小转换无济于事，无论如何它们都会进行小转弯，以一种奇怪的方式摆动。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）