形变
# 形变
```css
.box {
transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
}
.box {
transform: translateX(200px) | translateY(200px);
}
.box {
transform: scaleX(2) scaleY(0.5)
}
```
二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>形变</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
background-color: red;
margin: 10px auto;
transition: 3s;
}
/*旋转形变:旋转的是角度 deg*/
.d1:hover {
/*transform: rotateX(3600deg);*/
/*transform: rotateY(3600deg);*/
/*transform: rotateZ(3600deg);*/
transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
}
/*偏移形变:偏移的是距离 px*/
.d2:hover {
/*transform: translateX(200px);*/
/*transform: translateY(200px);*/
transform: translateX(200px) translateY(200px);
}
/*缩放形变:缩放的是比例*/
.d3:hover {
transform: scale(2, 0.5);
}
.d4:hover {
/*transform: translateX(200px) rotateZ(3600deg);*/
transform: rotateZ(3600deg) translateX(200px);
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>
