Question

我真的想知道这种效果是如何产生的。

查看此视频，仅需12秒。

我尝试：

.zoom {transform:scale(0.1); }
.zoom:hover {transform:scale(2); }

如何让它从（左上角）开始，并以（视图中的视频）结尾（右下角）结束？

提前感谢..

Answer 1

你所追求的是transform-origin属性。

这是一个例子。 http://codepen.io/dropkick/pen/YqKzdG/

HTML

<div class="box"></div>
<button>click me</button>

CSS

.box {
  background: #0f0;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  transition: transform 0.5s linear;
  transform-origin: top right;
  transform-style: preserve-3D;
  transform:scale(0.1);
}

.box-scale {
  transform:scale(1.0);
}

button {
  display: block;
  margin: auto;
}

JS

$('.scale').click(function () {    
  $('.box').toggleClass('box-scale');
});

Answer 2

你需要变换起源！ https://developer.mozilla.org/en/docs/Web/CSS/transform-origin

设置原点设置转换的起点。它会从那里长大。

CSS效果从小到大缩小

2 个答案: