学习目标:
通过展开扑克牌这个小demo熟悉CSS3的2D转换属性
学习内容:
2D转换用到的CSS属性是transform,属性值为translate(平移),rotate(旋转),scale(缩放),skew(倾斜),一般用不到skew。
1,translate语法
translateX: 操纵在x轴上位移,当取值为正时,元素向右移动,取值为负时,元素向左移动。例如:translateX:10px;表示元素向右移动10px,translateX:-10px;表示元素向左移动10px,除了具体像素值外,还可以取百分比数值,需要注意的是这个百分比指的是元素自身大小的百分比,translateX:50%;元素将向右移动自身大小的50%。
transY:操纵元素在y轴上位移,取值范围与translateX相同,正值为上,负值为下。
translate:复合写法,第一个值是translateX,第二个值是translateY。
2,rotate 语法
rotateX:操纵元素绕X轴进行旋转,可类比于体操运动中的单杠旋转,rotateX(360deg)可以使元素绕X轴旋转一周。
rotateY:操纵元素绕Y轴进行旋转,可类比于舞蹈中的钢管舞,rotateY(360deg)可以使元素绕Y轴旋转一周。
rotate:操纵元素绕原点进行旋转,默认为元素中心,旋转点可通过transform-origin设置原点位置,rotate(360deg)表示元素绕原点顺时针旋转360度。
transform-origin:在2D变换中,可用来设置旋转的原点,可以取具体值,也可以用关键字,transform-origin:10px 20px;表示旋转起点位于元素中心点右边10px,向上20px的位置,transform-origin:center center;是默认值,旋转点在元素中心。
3,scale语法(2D)
设置单一的数值,将同时作用于X轴和Y轴,让该元素进行缩放。
设置两个值,第一个值代表X轴的缩放倍数,第二个代表Y轴的缩放倍数。
当值大于一时,元素将会被放大,小于1则缩小,等于1时相当于没设。
实操案例
1,需求分析
我们需要在这个案例当中同时使用translate,rotate和scale这三个属性。现在的需求是:
- 初始状态下十三张牌并排展示
- 当鼠标移入时,13张牌合并在屏幕中间
- 当合并完成时,纸牌放大并呈扇形展开,整体向下移动
2,代码实现
<!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>
* {
margin: 0;
padding: 0;
}
.box {
font-size: 0;
/*去掉图片的默认间距*/
position: relative;
margin: auto;
width: 1300px;
height: 100px;
transition: transform 2s 2s;/*延时等待牌组全部居中后,在下落时完成放大缩放旋转的操作*/
}
/* 定位 */
img {
position: absolute;
left: 0;
width: 100px;
height: 140px;
transform-origin: left bottom;
transition: left 2s,transform 2s 2s;
}
img:nth-child(2) {
left: 100px;
}
img:nth-child(3) {
left: 200px;
}
img:nth-child(4) {
left: 300px;
}
img:nth-child(5) {
left: 400px;
}
img:nth-child(6) {
left: 500px;
}
img:nth-child(7) {
left: 600px;
}
img:nth-child(8) {
left: 700px;
}
img:nth-child(9) {
left: 800px;
}
img:nth-child(10) {
left: 900px;
}
img:nth-child(11) {
left: 1000px;
}
img:nth-child(12) {
left: 1100px;
}
img:nth-child(13) {
left: 1200px;
}
/* 旋转,缩放 */
.box:hover img:nth-child(1) {
transform: rotate(-60deg) scale(1.2);
}
.box:hover img:nth-child(2) {
transform: rotate(-50deg) scale(1.2);
}
.box:hover img:nth-child(3) {
transform: rotate(-40deg) scale(1.2);
}
.box:hover img:nth-child(4) {
transform: rotate(-30deg) scale(1.2);
}
.box:hover img:nth-child(5) {
transform: rotate(-20deg) scale(1.2);
}
.box:hover img:nth-child(6) {
transform: rotate(-10deg) scale(1.2);
}
.box:hover img:nth-child(7) {
transform: scale(1.2);
}
.box:hover img:nth-child(8) {
transform: rotate(10deg) scale(1.2);
}
.box:hover img:nth-child(9) {
transform: rotate(20deg) scale(1.2);
}
.box:hover img:nth-child(10) {
transform: rotate(30deg) scale(1.2);
}
.box:hover img:nth-child(11) {
transform: rotate(40deg) scale(1.2);
}
.box:hover img:nth-child(12) {
transform: rotate(50deg) scale(1.2);
}
.box:hover img:nth-child(13) {
transform: rotate(60deg) scale(1.2);
}
.box:hover img {
left: 700px;
}
/* 让容器携带元素整体位移 */
.box:hover{
transform: translateY(200px);
}
</style>
<body>
<div class="box">
<img src="image/images/c-1.png" alt="">
<img src="image/images/c-2.png" alt="">
<img src="image/images/c-3.png" alt="">
<img src="image/images/c-4.png" alt="">
<img src="image/images/c-5.png" alt="">
<img src="image/images/c-6.png" alt="">
<img src="image/images/c-7.png" alt="">
<img src="image/images/c-8.png" alt="">
<img src="image/images/c-9.png" alt="">
<img src="image/images/c-10.png" alt="">
<img src="image/images/c-11.png" alt="">
<img src="image/images/c-12.png" alt="">
<img src="image/images/c-13.png" alt="">
</div>
</body>
</html>
3.效果展示
总结
通过完成这个简单的小demo,可以对2D转换有一个较为直观的了解,其与延时和定位配合时,能够完成一些简单的动画效果。