首页 > 开发 > CSS > 正文

CSS3实例教程:变形属性transform实例讲解

2024-07-11 09:01:50

字体：大中小

来源：转载

供稿：网友

武林网(www.vevb.com)文章简介：CSS3有一个变形相关的属性，transform。

CSS3有一个变形相关的属性，transform。

使用这个属性你可以进行 :
translate(x, y); 移动元素的坐标。
rotate(30deg); 旋转元素。
scale(x, y); 缩放。
skew(x, y); 元素的倾斜。

以上操作默认是元素的中心点来进步变换的，很多时候我们需要去改变他。

transform-origin:x y;属性，也需要使用坐标参数，他的可用值有下面这些：
left，center，top，bottom
50%，50%
0px，0px

示例，让元素的变形基准点为左下角，假设元素高度100px,有下面三种写法：

transform-origin: left bottom;
transform-origin: 0% 100%;
transform-origin: 0 110px;

针对不同的浏览器可用加上特有的前缀：
-moz-transform-origin，-o-transform-origin， -webkit-transform-origin

上一篇：CSS实例学习教程:用CSS3绘制网页渐变背景

下一篇：CSS制作网页变色按钮:实例详解网页变色按钮

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注