创建网页3d空间
.wrap {
perspective: 800px;
}
.wrap div {
width: 100px;
height: 100px;
background-color: pink;
margin: 30px;
text-align: center;
line-height: 100px;
font-size: 30px;
/* 过渡动画 */
transition: 2s;
}
.box1:hover {
background-color: blue;
transform: rotate(45deg);
}
.box2:hover {
background-color: tomato;
transform: rotate(-45deg);
}
.box3:hover {
transform: rotateX(60deg);
}
.box4:hover {
transform: rotateY(60deg);
}
.box5:hover {
transform: rotateY(-60deg);
}
.box6:hover {
transform: rotateX(120deg);
}
.box7:hover {
transform: rotateX(-120deg);
}
transform: scale() 缩放
- transform: scale(x,y) 沿着x轴和y轴缩放
- transform: scaleX(x) 沿着x轴缩放
- transform: scaleY(y) 沿着y轴缩放
> 取值范围0~1之间表示缩小,1表示正常大小,1以上表示放大,默认值为1
> 取值为负值表示先翻转后缩放
>
> 为一个值的时候,沿着水平方向和垂直方向等比例缩放
>
> 元素缩放为0 后,原来的位置还在
>
> x与y之间用逗号隔开
```html
transform: scale(1.5);/* 沿着水平方向和垂直方向都放大1.5倍,等比例缩放 */
transform: scale(-1.5);/* 先翻转,然后 沿着水平方向和垂直方向都放大1.5倍 */
transform: skew() 倾斜
- transform: skew(x,y) 沿着x轴和y轴倾斜
- transform: skewX(x) 沿着x轴倾斜
- transform: skewY(y) 沿着y轴倾斜
> 单位deg(角度)
> 正值,向左上角和右下角倾斜;负值,向右上角和左下角倾斜
>
> 为一个值的时候,只沿着水平方向倾斜
```html
/* 为一个值的时候,只沿着水平方向位移 */
.box1:hover {
transform: skew(45deg);
}
/* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 45 度 */
.box2:hover {
background-color: tomato;
transform: skew(30deg, 45deg);
}
.box3:hover {
transform: skewX(-45deg);
}
.box4:hover {
transform: skewY(45deg);
}
.box5:hover {
transform: skewY(-45deg);
}