javascript - 位移动画问题
本文介绍了javascript - 位移动画问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是一个照片墙，现在需要做一个动画是其中某一个照片会从原位置慢慢放大至图二类似的效果
现在的问题是，不同图片的位置不一样，怎样才能让每个图片放大都是从当前位置慢慢放大到中间？
不会要每个都写不同的动画吧。。
或者说用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>
<div id="big_box">
</div>
</body>
<script type="text/javascript">
var html = '<div class="small_box"></div>';
for (var i = 0; i < 30; i++){
$('#big_box').append(html);
}
console.log(i)
</script>
</html>
解决方案
用纯css可以实现
<!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>
<div 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"/>
</div>
</body>
</html>
我这里使用input元素代替div只是为了不用js实现点击放大的效果
这里最关键的两句是：
perspective: 1px;
transform: translateZ(-100px) scale(400);
translateZ(-100px)在perspective:1px的情况下让元素的位置迅速的朝视点中心靠拢
并且元素会被缩到很小，使用scale(400)将其缩放到合适的大小
translateZ的值越大scale的值也需要越大，元素的位置也无限接近于视点中心（理论上来说不能达到）
这篇关于javascript - 位移动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
