css3盒子的简单变形

CSS3的盒子模型大大提升了网页的展示效果，在盒子的样式上，我们可以使用一些简单的变形，让网页更加美观。

下面我们来介绍一些常用的CSS3盒子变形

.Box{
    width: 150px;
    height: 150px;
    background-color: #ccc;
    transition: all 0.5s;
}

/* 旋转变形 */
.Box:hover{
    transform: rotate(45deg);
}

/* 倾斜变形 */
.Box:hover{
    transform: skew(30deg,20deg);
}

/* 缩放变形 */
.Box:hover{
    transform: scale(1.2);
}

以上三种变形分别是旋转、倾斜和缩放，在hover状态下，给盒子添加对应的变形属性，就可以观察到盒子的变化。

当然，这些变形属性不仅可以单独应用，还可以组合使用。

/* 旋转和缩放 */
.Box:hover{
    transform: rotate(45deg) scale(1.2);
}

/* 倾斜和缩放 */
.Box:hover{
    transform: skew(30deg,20deg) scale(1.2);
}

通过组合使用不同的变形属性，我们可以创造出更加复杂的效果，例如倾斜和旋转。

/* 倾斜和旋转 */
.Box:hover{
    transform: skew(30deg,20deg) rotate(45deg);
}

多样化的CSS3盒子变形，给我们带来了更加有趣的网页设计。