Educoder html网页综合项目实战 第4关：用CSS3实现放大效果

任务描述

本关任务：用CSS3放大效果。

效果如下：

相关知识

为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。

transform属性

下面是基本的html结构，：

1. <div class="scale">
2. <img src="img/diary1.jpg" alt="diary1"/>
3. </div>

效果如下：

现在需要基于中心放大1.2倍。

效果如下：

该如何实现呢？
咱们先实现放大1.2倍，用到了 transform 属性。

如上面所说，添加如下代码：

1. .scale:hover img{ /*注意给 img 添加属性*/
2. transform: scale(1.2,1.2);
3. transform-origin: center center;
4. }

效果如下：

可以看出，上面的图片超出了边框，而且放大有点突兀。先解决超出边框的问题，添加如下代码：

1. .scale{
2. overflow: hidden; /*内容溢出时隐藏*/
3. }

这里解释一下参数：

• scale表示放大或缩小；

• ()里大于1 表示放大，小于1 表示缩小；

• 第一个数表示x轴的缩放，第二个数表示y轴的缩放，如果两个数一样，可以用一个数代替。

transition属性

基本效果已经实现了，就是有点突兀，如何平滑的过渡呢？这里用到了transition属性。

添加如下代码：

1. .scale img{
2. transition: all 0.3s linear;
3. }

效果如下：

这就已经实现了，参数和上一关一样。

这里再介绍一下可以转变元素位置的属性：

transform-origin: center center;

这里表示基于中心进行缩放或移动。

参数详解：

• 第一个参数可以为：left， center，right，定义视图被置于 X 轴的何处；

• 第二个参数可以为：top，center， bottom， 定义视图被置于 Y 轴的何处。

它默认是基于中心的。用图表示如下：