CSS3 transform: scale() 缩放转换【实例分析演示】
CSS3中有个transform: scale()的属性，这是一个缩放转换属性。scale()又分为scale(x,y) ，scaleX(x) ，scaleY(y) ，它们都是2D缩放转换属性。此外，还有scale3d(x,y,z) ，scaleZ(z) ，这些是3D缩放转换。
本文将介绍transform: scale()一个简单的缩放实例。
transform: scale() 缩放转换
demodownload
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#pic {
width: 200px;
height: 250px;
border: 1px solid whitesmoke;
box-shadow: 0 0 0 8px pink;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#pic:hover img {
transform: scale(1.5, 1.5);
transition: all 2s;
}
#pic p {
width: 200px;
height: 20px;
background: black;
opacity: 0.5;
position: absolute;
bottom: -20px;
color: white;
font-family: "微软雅黑";
font-size: 13px;
text-align: center;
}
#pic:hover p {
bottom: 0px;
transition: bottom 1s;
}
</style>
</head>
<body>
<div id="pic">
<img src="1.jpg" width="200" height="250" />
<p>恰好是少年</p>
</div>
</body>
</html>
代码功能
当鼠标移到图片上时，图片放大，底部滑入文字；当鼠标移开图片时，图片缩小恢复到原图，底部文字滑出。
代码分析
图片盒子是一个DIV标签，其id值是pic。
p标签是位于图片底部的文字内容。p标签默认隐藏。
#pic:hover img { } 设置图片鼠标悬停时的变化，这里实例用了下面两行代码：
transform: scale(1.5, 1.5);
transition: all 2s;
transform: scale(1.5, 1.5);的意思是图片高和宽均放大1.5倍；而transition: all 2s;的意思是动画时间为2s。
我们可以尝试改变scale(x,y)的值，比如改为scale(1,2)或scale(2,1)，看看效果如何。
我们还可以改为scaleX(x)或scaleY(y)这样的缩放属性，看看各种不同的效果，以便更能理解其中的含义。
transform属性：2D缩放转换
1.scale(x,y)
定义：
基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数。
语法：
transform：scale(x,y);
2.scaleX(x)
定义：
基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数。
语法：
transform：scale(x);
3.scaleY(y)
定义：
基于原来的位置进行伸缩变换，其中y代表沿Y轴的伸缩倍数。
语法：
transform：scale(y);
transform属性：3D缩放转换
1.scale3d(x,y,z)
定义：
基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数，z代表沿Z轴的伸缩倍数。
语法：
transform：scale3d(x,y,z);
2.scaleZ(z)
定义：
基于原来的位置进行伸缩变换，其中z代表沿Z轴的伸缩倍数。
语法：
transform：scaleZ(z);
您可能对以下文章也感兴趣
- 纯CSS实现的星光动画背景
- 纯CSS实现输入框字符自动转为小写或大写
- 8款CSS动画背景(飞扬文字/旋转方块/粒子动画/彩色水滴。。。)
- 5款CSS动画背景(滑动对角线/图案无限滚动/灰度三角形/闪烁星星)
- CSS动画背景-流星雨效果
- css滚动星星效果/星空动画背景
- CSS粒子动画背景
- CSS动画背景-对角线颜色渐变
