深入剖析CSS变形transform(3d)

什么是Transform

Transform 是 CSS3 中非常强大的一个属性。它可以让我们对元素进行各种变形操作，例如平移、旋转、缩放、扭曲等等，同时它也支持 3D 移动和变形。

Transform 的使用

Transform 属性包括很多个子属性，常用的有 translate、rotate、scale、skew，这些属性都是用来控制不同的变形效果的，它们的值可以是百分比、像素、角度等等。

我们可以将这些属性一起组合使用，来实现更加自然和复杂的效果。

Translate 属性示例

Translate 是用来定义元素平移的属性，它可以接收两个参数，一个是水平方向的偏移量，一个是垂直方向的偏移量。

/* move 50px to the right and 100px down */
translate(50px, 100px);

Rotate 属性示例

Rotate 属性可以让元素进行旋转变形，它接收一个参数，表示旋转的角度。

/* rotate 45 degrees */
rotate(45deg);

Transform-origin 属性

Transform-origin 属性是用来定义变形的中心点，默认是元素的中心点，可通过属性值来进行修改。

/* smooth animation */
transform-origin: 50% 50%;

3D效果示例

使用 transform: translateZ 可以让元素呈现出 3D 效果，如果 translateX 或 translateY 的值非常大，也可以模拟出 3D 效果。例如：

/* 3D效果示例 */
.cube{
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
}
.cube span{
    position: absolute;
    width: 200px;
    height: 200px;
    color: #fff;
    line-height: 200px;
    font-size: 40px;
    text-align: center;
}
.cube .front{
    transform: rotateY(0deg) translateZ(100px);
    background-color: #f40;
}
.cube .back{
    transform: rotateY(180deg) translateZ(100px);
    background-color: #06c;
}
.cube .top{
    transform: rotateX(90deg) translateZ(100px);
    background-color: #09f;
}
.cube .bottom{
    transform: rotateX(-90deg) translateZ(100px);
    background-color: #0c6;
}
.cube .left{
    transform: rotateY(-90deg) translateZ(100px);
    background-color: #f0f;
}
.cube .right{
    transform: rotateY(90deg) translateZ(100px);
    background-color: #c00;
}

以上就是深入剖析 CSS 变形 transform(3d) 的攻略，使用 transform 可以实现出各种复杂效果，可以让页面更加生动有趣。