位移动画问题

iftrue

1071712

发布于
2016-07-08

更新于
2016-07-08

这是一个照片墙，现在需要做一个动画是其中某一个照片会从原位置慢慢放大至图二类似的效果

图片描述

现在的问题是，不同图片的位置不一样，怎样才能让每个图片放大都是从当前位置慢慢放大到中间？
不会要每个都写不同的动画吧。。

或者说用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 css3 css3动画 javascript

阅读 4.9k

3 个回答

新しい世界

✓ 已被采纳

用纯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的值也需要越大，元素的位置也无限接近于视点中心（理论上来说不能达到）

jesse131

3481715

发布于
2016-07-08

var html = '<div class="small_box"></div>';

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)