css3 transform 变形

最新推荐文章于 2024-11-29 11:25:05 发布

转载最新推荐文章于 2024-11-29 11:25:05 发布 · 599 阅读

文章标签：

#CSS3

HTML5CSS3 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了CSS3中的transform属性，包括rotate、scale、skew和translate，通过实例展示了如何使用这些属性实现文字或图像的旋转、缩放、倾斜和移动，以及其在实际网页设计中的应用。

在css3中，用transform可以实现文字或图像的旋转、缩放、倾斜和移动，并且该元素下的所有子元素，随着父元素一样转、缩放、倾斜和移动。

transform属性

transform的属性包括：rotate()、skew()、scale()、translate()，分别有x、y两个参数，比如rotatex()和rotatey()。

1、rotate()：旋转，参数为xdeg，x为数值，如：10deg。

.photo a{
	display:inline-block;
	overflow:hidden;
	border:1px solid #ccc;
	padding:5px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
	-webkit-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	transform:rotate(15deg);
}

<div class="photo"><a href="http://www.XXX.com"><img src="XXX.jpg" /></a></div>

2、scale()：比例，“1.5”表示以1.5倍的比例放大，如果是负数表示为缩小。

<div class="scale">Web前段工程师</div>

.scale{
	padding:5px;
	color:#fff;
	background-color:#666;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-o-transition:all 1s ease-in-out;
	transition:all 1s ease-in-out;
}
.scale:hover{
	-webkit-transform:scale(1.5);
	-moz-transform:scale(1.5);
	-o-transform:scale(1.5);
	transform:scale(1.5);
}

3、skew()：倾斜。

<div class="skew">Web前段工程师</div>

.skew{
	margin-top:10px;
	padding:5px;
	color:#fff;
	background-color:#666;
	-webkit-transform:skew(20deg);
	-moz-transform:skew(20deg);
	-o-transform:skew(20deg);
	transform:skew(20deg);
}

4、translate()：位移，如下例子中translate(120px,10px)表示向右移动120px，向下移动10px，如果是向上向左移动分别为负数。

<div class="translate">Web前段工程师</div>

.translate:hover{
	-webkit-transform:translate(120px,10px);
	-moz-transform:translate(120px,10px);
	-o-transform:translate(120px,10px);
	transform:translate(120px,10px);
}