CSS 转换

2024-04-12 19:54:04 344

示例

的HTML

<div class="translate"></div>

的CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

本示例将div在X轴上移动200px，在Y轴上移动200px100px*50%=50px。

您还可以在单轴上指定平移。

在X轴上：

.translate {
    transform: translateX(200px);
}

在Y轴上：

.translate {
    transform: translateY(50%);
}