css3全套教程,css3初学者教程

首页 > 教育 > 作者:YD1662024-05-18 15:27:24

案例:小米商品详情

css3全套教程,css3初学者教程(5)

效果如下:

css3全套教程,css3初学者教程(6)

2D 转换

转换是 CSS3 中具有颠覆性的一个特征,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式。

转换再配合过渡和动画,可以取代大量早期只能靠 Flash 才可以实现的效果。

在 CSS3 当中,通过 transform 转换来实现 2D 转换或者 3D 转换。

1、缩放:scale

格式:

transform: scale(x, y); transform: scale(2, 0.5);

参数解释: x:表示水平方向的缩放倍数。y:表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。

取值:大于1表示放大,小于1表示缩小。不能为百分比。

格式举例:

css3全套教程,css3初学者教程(7)

效果:

css3全套教程,css3初学者教程(8)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.