这是一个照片墙，现在需要做一个动画是其中某一个照片会从原位置慢慢放大至图二类似的效果
现在的问题是，不同图片的位置不一样，怎样才能让每个图片放大都是从当前位置慢慢放大到中间？
不会要每个都写不同的动画吧。。
或者说用transform: translate()能不能做到水平垂直居中，并且有动画效果？
图片效果的代码,.test是放大效果
<!DOCTYPE html>
<html>
<head>
<title>1</title>
</head>
<script type="text/javascript" src="./jquery-3.0.0.min.js"></script>
<style type="text/css">
#big_box{
margin: auto;
width: 1260px;
height: 400px;
padding: 100px;
}
.small_box{
float: left;
background-color: #484848;
border-radius: 3px;
width: 190px;
height: 110px;
margin: 10px;
box-shadow: 0 0 10px #ababab
}
.test{
width: 50%;
height: 50%;
transform: translate3d(130px,80px,0);
position: absolute;
}
</style>
<body>
<p id="big_box">
</p>
</body>
<script type="text/javascript">
var html = '<p class="small_box"></p>';
for (var i = 0; i < 30; i++){
$('#big_box').append(html);
}
console.log(i)
</script>
</html>
用纯css可以实现
我这里使用
input元素代替p只是为了不用js实现点击放大的效果这里最关键的两句是：
translateZ(-100px)在perspective:1px的情况下让元素的位置迅速的朝视点中心靠拢并且元素会被缩到很小，使用
scale(400)将其缩放到合适的大小translateZ的值越大scale的值也需要越大，元素的位置也无限接近于视点中心（理论上来说不能达到）这个肯定要用到JS的 CSS实现不了。用绝对定位根据鼠标移入的小图偏移大图的位置