一、变形
变形是指通过 CSS 来改变元素的形状或位置,变形不会影响到页面的布局。通过 transform 属性,我们可以实现变形的效果。
二、平移变形
<!DOCTYPE html>
<html>
<head>
<title>平移变形</title>
<meta charset="UTF-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
transition: 2s;
}
.box1:hover{
/*
transform:用来设置元素的变形效果
- 平移:
- translateX():沿着x轴方向平移
- translateY():沿着y轴方向平移
- translateZ():沿着z轴方向平移
- 平移元素,百分比是相对于自身计算的
*/
transform: translateX(100px) translateY(-50%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
三、Z轴平移
Z 轴平移,调整元素在 Z 轴的位置,正常情况下就是调整元素和人眼之间的距离,距离越大,元素里人越近。Z 轴平移属于立体效果(近大远小),默认情况下网页是不支持透视的。如果需要看到效果,必须设置网页的视距。
<!DOCTYPE html>
<html>
<head>
<title>Z轴平移</title>
<meta charset="UTF-8">
<style>
body{
/* 设置视距 */
perspective: 800px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
transition: 2s;
}
.box1:hover{
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
四、旋转变形
通过旋转,可以使元素沿着 x、y 或 z 轴旋转指定的角度。
<!DOCTYPE html>
<html>
<head>
<title>旋转变形</title>
<meta charset="UTF-8">
<style>
body{
/* 设置视距 */
perspective: 800px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 0 auto;
margin-top: 200px;
transition: 2s;
/*
backface-visibility:是否显示元素的背面
- 可选值:
- hidden:隐藏
- visible:默认值,显示
*/
backface-visibility: visible;
}
.box1:hover{
/*
通过旋转可以使元素沿着x、y或z轴指定的角度
- rotateX:沿着X轴旋转
- rotateY:沿着Y轴旋转
- rotateZ:沿着Z轴旋转
- deg代表角度,turn代表圈数
*/
transform: rotateZ(1turn);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
五、缩放变形
<!DOCTYPE html>
<html>
<head>
<title>缩放变形</title>
<meta charset="UTF-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
/*
transform-origin:指定变形的原点
- center:默认值,从中间开始
*/
transform-origin: 0 0;
transition: 2s;
}
.box1:hover{
/*
对元素进行缩放
- scaleX():水平方向缩放
- scaleY():垂直方向缩放
- scaleZ():Z轴缩放
- scale():双方向缩放
*/
transform: scale(2);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
标签:平移,25,缩放,变形,transform,box1,200px
From: https://www.cnblogs.com/nanoha/p/17020238.html