一、
transform(变形)、transition(过渡)和animation(动画)是CSS3动画的3大部分,由于它们的出现,web前端实现动画变得简单方便起来,不在单纯依靠js,实现的动画效果也不错。
transform主要用于元素的变形处理。其主要拥有四种变换:rotate()、scale()、skew()、matrix()
1、translate() 方法 平移
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
注意:向下向右是正值
rotate() 方法 旋转
2、通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
正值顺时针,负值逆时针
3、scale() 方法 缩放
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。
注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。
x、y 表示元素沿着水平方向(X轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小4、skew() 方法 斜切(倾斜)
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
在CSS3中,我们可以使用rotate()方法来将元素相对中心原点进行旋转。这里的旋转是二维的,不涉及三维空间的操作。
其实skewX()方法变形原理是这样的:由于我给元素限定了高度为100px,而skewX()方法是沿着X轴方向倾斜。所以,只要倾斜角度不 是180°,元素都会保持100px的高度。同时为了保持倾斜,只能沿着X轴拉长本身。
5、transform-origin用来设置旋转缩放等中心点坐标,
任何一个元素都有一个中心原点,默认情况下,元素的中心原点位于X轴和Y轴的50%处。
默认情况下,CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形。
假如我们要使得元素进行位移、缩放、旋转、倾斜这些变形操作的中心原点不是原来元素的中心位置,那该怎么办呢?
在CSS3中,我们可以通过transform-origin属性来改变元素变形时的中心原点位置。
transform-origin属性取值有2种:一种是采用长度值,另外一种是使用关键字。长度值一般使用百分比作为单位,很少使用px、em等 作为单位。不管transform-origin取值为长度值还是关键字,都需要设置水平方向和垂直方向的值。transform-origin属性取值跟背景 位置取值相似
关键字 | 百分比 | 说明 |
---|---|---|
top left | 0 0 | 左上 |
top center | 50% 0 | 靠上居中 |
top right | 100% 0 | 右上 |
left center | 0 50% | 靠左居中 |
center center | 50% 50% | 正中 |
right center | 100% 50% | 靠右居中 |
bottom left | 0 100% | 左下 |
bottom center | 50% 100% | 靠下居中 |
bottom right | 100% 100% | 右下 |
方法或属性 | 说明 |
---|---|
translate() | 位移 |
scale() | 缩放 |
rotate() | 旋转 |
skew() | 倾斜 |
transform-origin | 中心原点 |
三、简单应用了skew
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(0,20deg);
-ms-transform:skew(0,20deg); /* IE 9 */
-moz-transform:skew(0,20deg); /* Firefox */
-webkit-transform:skew(0,20deg); /* Safari and Chrome */
-o-transform:skew(0,20deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>
四、实战
这一章看似简单易懂,其实这些变形效果往往都是综合或等来实现非常复杂的特效。
用这里的知识可以实现简单的照片墙效果,你也可以自己发挥做出更加个性的照片墙,以后我可能会找一些更加炫酷的实现,今天先用这个知识做简单的实现
<!DOCTYPE html>
<html>
<head>
<title>CSS3实现个性图片墙</title>
<style type="text/css">
#container
{
position:relative; 注释:可以结合前面的博客,想想这样定位的作用
width:800px;
height:600px;
margin:0 auto;
background-image:url("../App_images/lesson/run_css3/bg.jpg");
}
img
{
position:absolute;
padding:10px;
background-color:White;
}
img:Hover
{
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 注释:鼠标放上去图片出现阴影
}
#container img:first-child 注释:用来选择是第几张图片
{
left:80px; top:60px; -webkit-transform:rotate(30deg);
}
#container img:nth-child(2)
{
left:240px; top:60px; -webkit-transform:rotate(-30deg);
}
#container img:nth-child(3)
{
left:420px; top:60px; -webkit-transform:rotate(30deg);
}
#container img:nth-child(4)
{
left:100px; top:240px; -webkit-transform:rotate(-30deg);
}
#container img:nth-child(5)
{
left:270px; top:240px; -webkit-transform:rotate(0);
}
#container img:last-child
{
left:420px; top:240px;-webkit-transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="container">
<img src="#/> 注释:添加自己喜欢的图片
<img src="#/>
<img src="#/>
<img src="#/>
<img src="#/>
<img src="#/>
</div>
</body>
</html>