这是一个照片墙，现在需要做一个动画是其中某一个照片会从原位置慢慢放大至图二类似的效果
现在的问题是，不同图片的位置不一样，怎样才能让每个图片放大都是从当前位置慢慢放大到中间？
不会要每个都写不同的动画吧。。
或者说用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>
PHP中文网2017-04-11 11:34:43
<!DOCTYPE html>
<html>
<head>
<title>1</title>
</head>
<style type="text/css">
#big_box{
margin: auto;
width: 1260px;
/*height: 400px;*/
padding: 100px;
overflow: hidden;
/*关键*/
perspective: 1px;
}
.small_box{
float: left;
background-color: #484848;
border-radius: 3px;
width: 190px;
height: 110px;
margin: 10px;
box-shadow: 0 0 10px #ababab;
}
.small_box:checked{
/*关键*/
transform: translateZ(-100px) scale(400);
transition: .5s;
}
</style>
<body>
<p id="big_box">
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
<input class="small_box" type="checkbox"/>
</p>
</body>
</html>
我这里使用input元素代替p只是为了不用js实现点击放大的效果
这里最关键的两句是：
perspective: 1px;
transform: translateZ(-100px) scale(400);
translateZ(-100px)在perspective:1px的情况下让元素的位置迅速的朝视点中心靠拢
并且元素会被缩到很小，使用scale(400)将其缩放到合适的大小
translateZ的值越大scale的值也需要越大，元素的位置也无限接近于视点中心（理论上来说不能达到）
伊谢尔伦2017-04-11 11:34:43
var html = '<p class="small_box"></p>';
for (var i = 0; i < 30; i++) {
$('#big_box').append(html);
}
$('.small_box').click(function(){
$(this).css({
"position":"absolute",
"top": document.body.clientHeight/2,
"left":document.body.clientWidth/2 - 250
}).animate({
width:"500px",
height:"400px",
},500)