css3 transform 变形

在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.rainleaves.com"><img src="ydfp.jpg" /></a></div>

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

<div class="scale">身世浮沉雨打萍。</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">身世浮沉雨打萍。</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">身世浮沉雨打萍。</div>
.translate:hover{
	-webkit-transform:translate(120px,10px);
	-moz-transform:translate(120px,10px);
	-o-transform:translate(120px,10px);
	transform:translate(120px,10px);
}

 

demo:http://rainleaves.com/demo/transition/transition.html  前三个为transition动画实例,后四个为transform实例。

 

 

马上分享给你的朋友吧~

css3 transform 变形》上有 4 条评论

  1. WEB前端技术越来越好了,个人很喜欢网页设计,不过现在选择了javaWeb。
    希望以后能与博主交换友链共同进步!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>