css3图形平移代码

CSS3是目前较为流行的前端开发技术之一，通过它可以制作出各种炫酷的图形和动效。本文将介绍CSS3中的图形平移代码。

div{
    width:100px;
    height:100px;
    background-color:#f00;
    transition: transform 1s; 
}

div:hover{
    transform: translate(50px,50px); 
}

上述代码的作用是：在DIV元素上绑定鼠标悬浮事件，当鼠标悬浮在DIV上时，DIV会平移50px的距离。其中，transition属性设置动画持续时间为1s，为了实现平滑的动态效果。

同时，translate()函数是CSS3中较为重要的布局函数之一。它可以沿X轴和Y轴分别进行位移，使元素实现变换位置的效果。

div{
    width:100px;
    height:100px;
    background-color:#f00;

    transform:translate(0,0); 
    transition: transform 1s; 
}

div:hover {
    transform: translate(50px,50px) rotate(45deg); 
}

除了简单的平移效果外，translate()函数还可以结合其他变换属性实现更加复杂的图形效果。如上述代码，鼠标悬浮在DIV上时，除了平移50px的距离，还会顺时针旋转45度。

总体来说，CSS3图形平移代码是前端开发中非常重要的技术之一。通过巧妙地运用translate()函数等属性可以制作出各种炫酷的图形效果。