css3从中心放大

CSS3中的一个很cool的特性就是可以实现从中心放大。使用这个特性，可以让网页元素在被hover时，以酷炫的方式放大。下面我们来看看如何使用CSS3实现这个效果。

首先，我们需要一个需要被放大的元素。假设这个元素是一个正方形图片（用div模拟图片），我们可以设置这个元素的宽高为相同的值：

    <div class="zoom"></div>

    .zoom {
        width: 200px;
        height: 200px;
        background-image: url("yourimage.jpg");
        background-size: cover;
        border-radius: 50%;
    }

接下来，我们需要实现当鼠标hover到这个元素上时，元素以中心为原点放大。我们可以使用CSS3的transform和transition属性来完成这个动画效果：

    .zoom:hover {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

这里，我们使用了scale()方法，将元素在x和y方向上同时放大。默认以元素左上角为原点，所以我们需要将原点设置为中心点，即设置transform-origin为50% 50%。最后，我们还需要添加一个过渡效果，让放大的动画更加流畅。

至此，从中心放大的效果就实现了。我们可以根据需要调整放大的比例和过渡时间，让效果更加符合网页设计的要求。