htmlCSS3-transform的⽤法CSS3-transform的⽤法
1、transform实现位移、缩放、旋转、斜切
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style type="text/css">
/*⽤法⼀：transform实现位移*/
.box{
width:200px;
height:200px;
border:3px solid #000;
background-color: goldenrod;
margin:50px auto0;
/
*translte位移⽐定位做的位移性能⾼，建议使⽤translate*/
/*使⽤transform实现位移操作*/
transform:translate(0px,0px);
transition: all 500ms ease;
}
.box:hover{
transform:translate(50px,50px);
}
/*⽤法⼆：transform实现缩放*/
.box1{
width:200px;
height:200px;
border:3px solid #000;
background-color: goldenrod;
margin:200px auto0;
/*使⽤transform实现缩放*/
transform:scale(1,1);/*表⽰⽔平⽅向与竖直⽅向变为原先⼀倍*/
transform:scale(1,1);/*表⽰⽔平⽅向与竖直⽅向变为原先⼀倍*/            transition: all 500ms ease;
}
.box1:hover{
transform:scale(2,2);
}
/
*⽤法三：transform实现旋转*/
.box2{
width:200px;
height:200px;
border:3px solid #000;
background-color: goldenrod;
margin:200px auto0;
/*使⽤transform实现旋转*/
transform:rotate(0deg);
transition: all 500ms ease;
}
.
box2:hover{
transform:rotate(45deg);/*表⽰旋转45度*/
}
/*⽤法四：transform实现斜切*/
.box3{
width:200px;
height:200px;
border:3px solid #000;
background-color: goldenrod;
margin:200px auto0;
/*使⽤transform实现斜切*/
transform:skew(0,0);/*表⽰沿x轴进⾏斜切*/
transition: all 500ms ease;
}
.box3:hover{
transform:skew(45deg,0)/*表⽰斜切*/
}
/*⽤法五：transform实现斜切*/
.box4{
width:200px;
height:200px;
border:3px solid #000;
background-color: goldenrod;
margin:200px auto0;
/*使⽤transform实现斜切*/
transform:skew(0,0);/*表⽰沿y轴进⾏斜切*/
transition: all 500ms ease;
}
.box4:hover{
transform:skew(0,45deg)/*表⽰斜切*/
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
2、transform设置旋转中⼼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1,.box2,.box3,.box4{
width:200px;
height:200px;
border:2px solid black;
background-color: gold;
margin:30px;
float: left;
transition: all 500ms ease;
}
.box2{
transform-origin: left center ;/*设置旋转中⼼*/
}
.box3{
transform-origin: left top ;/*设置旋转中⼼*/
}
.box4{
transform-origin:50px 50px ;/*设置旋转中⼼，表⽰50*50的地⽅*/ }
.
box1:hover,.box2:hover,.box3:hover,.box4:hover{
transform:rotate(45deg);
}transition用法搭配
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
3、transform实现三维旋转
实现绕Y轴旋转，并设置透视距离
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform设置三维旋转</title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color: yellow;
border:3px solid black;
margin:50px auto0;
/*transform: rotate(45deg);  !*默认是暗转z轴旋转*!*/
/*做变形动画，需要设置初始值，否则会出现bug*/
transform:perspective(800px)rotate(0deg);/*perspective(800px)：为设置透视举例，经验值为800px*/            transition: all 1s ease;
}
.box:hover{
transform:perspective(800px)rotateY(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
显⽰效果如下所⽰：
实现绕X轴旋转，并设置透视距离代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。