CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
下面我们来介绍2D的转换:
一、移动(translate)根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动,可以改变元素在页面中的位置,类似于定位。
1、语法:
transform:translate(x,y);或者分开写也是可以的
transform:translateX(n);
transform:translateY(n);
2、重点:
- 定义2D转换中的移动,沿看X,Y轴元素移动;
- translate最大的优点就是不会影响其他元素的位置;
- translate自身的百分比是相对于自身元素translate(50%,50%);
- 对行内标签没有效果;
二、旋转(rotate):
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
语法:transfrom:rotate(旋转的度数)
重点:
- rotate(度数),单位是deg例如:rotate(45deg);
- 角度是正为顺时针,是负为逆时针;
- 默认顺时针的中心点为元素的中心点;
三、2D转换中心点transform-origin:
语法:transform-origin:x y;
重点:
- 注意后面x,y用空格隔开;
- x y默认的中心点是元素的中心点(50% 50%);
- 还可以给x y设定像素或者方向名词(right left center bottom top);
四、缩放 scale():
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
- 修改元素的大小,放大或者缩小元素
- 为负数会颠倒
- scale(a) scale(x,y)
五、倾斜 skew():
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
- skewX(<angle>);表示只在X轴(水平方向)倾斜。
- skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
- 让元素在不同方向上倾斜
- skew(a) 等于 skew(a,0)
- skew(x,y)
- 单位 角度deg
六、 matrix():
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
用矩阵表达变换量 matrix(a,b,c,d,x,y)
- a c x
- b d y
- 0 0 1
下面运用一个具体案例来实践一下:
如图效果:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 100px;
}
.transformElement{
width:200px;
height:200px;
background-color: red;
transition:all 1s linear;
float: left;
position: relative;
left: 0;
color: #FFF;
/* transform-origin: left top; */
}
.transformElement2{
width:200px;
height:200px;
background-color: blue;
transition:all 1s linear;
float: left;
}
.transformElement:hover{
/* transform: translate(200px,0) rotate(360deg) scale(2); */
/* left: 100px; */
/* transform: scale(2,0.5) */
transform: skew(-45deg,45deg);
}
.clock{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #Faa;
position: relative;
}
.stick{
width: 4px;
height: 200px;
background-color: blue;
position: absolute;
left: 198px;
top: 0;
transition: all 12s linear;
transform-origin: center bottom;
}
.stickshort{
width: 8px;
height: 100px;
background-color: rgb(142, 21, 248);
position: absolute;
left: 196px;
top: 100px;
transition: all 12s linear;
transform-origin: center bottom;
z-index: 2;
}
.clock:hover .stick{
transform: rotate(4320deg);
}
.clock:hover .stickshort{
transform: rotate(360deg);
}
</style>
</head>
<body>
<!-- <div class="transformElement"></div>
<div class="transformElement2"></div> -->
<div class="clock">
<div class="stick"></div>
<div class="stickshort"></div>
</div>
</body>
</html>
可以根据自己的要求来变换改动多动手,发挥自己的想象能力。