【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
/* 定义一个基本的HTML元素，如div或span，并应用2D转换 */
.element {
width: 100px;
height: 100px;
background-color: red;
/* 应用2D转换 - 平移 */
transform: translate(50%, 50%);
/* 设置动画过渡效果，使转换更平滑 */
transition: transform 0.5s ease-in-out;
}
/* 鼠标悬停时改变转换，触发过渡动画 */
.element:hover {
transform: translate(100%, 100%);
}这段代码定义了一个具有红色背景的HTML元素，并使用CSS3的2D转换功能将其平移。当鼠标悬停在该元素上时，它将被转换到右上角。transition属性确保转换会有一个平滑的过渡效果。
评论已关闭