css3位移位置 |css3 直播冒泡动画

下面是一个使用CSS3位移来平移元素的示例：

.box {
position: relative;
top: 100px;
left: 100px;
transform: translate(50px, 50px);
}

在这个示例中，大家首先使用position: relative;来为元素创建相对定位。接下来，大家使用top: 100px;和left: 100px;将元素向下和向右移动100像素。然后，大家在transform属性中使用translate(50px, 50px);将元素沿着水平方向和垂直方向分别向右和向下平移50像素。

CSS3位移还可以实现元素的旋转和缩放，如下所示：

.box {
position: relative;
top: 100px;
left: 100px;
transform: rotate(45deg) scale(1.5, 1.5);
}

在这个示例中，大家使用rotate(45deg)将元素旋转45度，然后使用scale(1.5, 1.5)将元素放大1.5倍。

如此大家可以方便的通过CSS3位移来控制HTML页面中元素的位置、大小和方向，从而实现更丰富、灵活的页面效果。