Miss秋天

 

HTML5学习日记（2）——css3 2D操作

　　这一章将主要描述CSS3中的平移，旋转，扭曲，拉伸的效果，所需要用的css为transform下的样式定义。首先，我们先将一段代码加入到您的页面，然后通过下边的修改来比对之间的不同之处。

　　

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Learn Css3(No.2)</title>
<style type="text/css">
div
{ 
    margin-left:5em;
    width:10em; 
    height:10em;
    background-color:yellow;
    font-size:1em;
    border-radius:1em;
}
body
{
    background-color:blue;
}
</style>
</head>

<body>
<div>
</div>
</body>
</html>

 

　　translate(a,b) 方法，该方法主要是通过设置a,b两个参数，来定义模块需要左右移动和上下移动的距离。

　　现在，我们在原有的代码基础上，新增一个div，同时新增一个css样式。

　　

#translateDiv
{
    -webkit-transform:translate(5em,1em);
}

<div id="translateDiv">用来演示translate的效果。
</div>

　　这时候运行一下，您就可以看到，新增的div向右移动了5em的距离，向下移动了1em的距离

　　

　　同样的，如果我们把里边的参数改为负数呢？没错，第一个参数改为负的，将会向左移动，第二个参数改为负的，将会向上移动。

　　如上图，就是将css改为：

　　

#translateDiv
{
    -webkit-transform:translate(-2em,-2em);
}

　　之后的效果。

　　rotate(a)方法：该方法可以对指定的模块进行顺时针或逆时针的旋转。

　　继续添加一个新的div和css样式：

#rotateDiv
{
    -webkit-transform:rotate(30deg);
}


<div id="rotateDiv">用来展示rotate的效果
</div>

　　运行起来，我们就会发现，页面上新出现了一个div,而是还是顺时针旋转了30度的div,从这里我们也就知道了这个30deg的效果，就是指的30度

旋转，如下图：

　　

　　这时候如果我们将30deg改为-30deg呢？嗯，没错，会逆时针旋转30度，不过这里就不演示了，可以自己去尝试一下，查看一下效果。

 　　scale(a,b)方法：这个方法主要是对模块进行高度，宽度的成倍放大或缩小。

　　新增一个div和一个css样式：

　　

#scaleDiv
{
    -webkit-transform:scale(0.5,2) translate(10em,-2em);
}

<div id="scaleDiv">用来演示scale的效果
</div>

　　第一个参数表示宽度缩小为原来的一半，第二个参数表示高度变为原来的2倍，同时为了让新增的模块不和之前的模块重叠，所以增加了一个translate，让其向右移动了10em,向上移动了-6em的距离，如图：

　　

　　skew() 方法：通过给定的角度让模块进行X轴或Y轴扭转。

　　新增一个div和一个css样式：

　　

#skewDiv
{
    -webkit-transform:skew(30deg,0deg);
}

<div id="skewDiv">用来演示Skew的效果
</div>

　　第一个参数表示扭曲X轴30°，第二个参数表示扭曲y轴30°。其效果如下图：

　　

　　以上内容就是css3中所包含的2D操作方法，根据这些方法就能做出很多以前做起来比较麻烦的效果，尤其是扭曲和旋转。解决了需要PS图片的痛苦。

posted on 2013-04-26 16:04  Miss秋天  阅读(212)  评论(0)    收藏  举报

导航