google-chrome - 启用 CSS3 的元素可以进行位置转换吗？

Question

我只是在玩我的投资组合网站，并注意到当我的 (Google Chrome) 屏幕放大到 400% 并聚焦在页脚上时，我有一些元素与流动网格不匹配。我知道我需要为此找到一个修复程序(如果您对如何为非常流畅的布局定位元素有任何想法/建议，请发布)，但是当我使用热键“按实际大小查看”时，我注意到我应用了两个独立的启用 CSS3 转换的参数(不透明度和宽度，代码位于下方)的元素会从原始位置平滑、缓慢地过渡到它在“实际大小” View 中所处的位置。

http://jsfiddle.net/Asustaba/VLw7k/

如果这令人困惑，我们深表歉意。如果有人需要更好地了解正在发生的事情，我可以附上过渡视频的链接。

.grower{
  -moz-transform: scale(.85);
  -webkit-transform: scale(.85);
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.grower:hover{
  -moz-transform: scale(1);
  -webkit-transform: scale(1); 
}

.grower_big{
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.grower_big:hover{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1); 
}

有人遇到过这个吗？是否可以在元素的绝对、相对或正常流定位之间设置基于过渡的移动(缓入缓出)？在基于视差的网络布局中查看时会怎样？

Answer 1

我想你是在问是否可以转换属性位置。如果是这种情况，那么你不能。大多数可以转换的元素都是使用数值的元素。以下是可以转换的 CSS 属性列表:http://www.w3.org/TR/css3-transitions/#properties-from-css-