css3平移 js

CSS3平移

平移是指在二维平面内，将一物体从一个位置移动到另一个位置的过程。在CSS3中可以使用transform属性对元素进行平移操作。

平移属性

平移属性transform 值包括以下几种：- translateX(x) ：将元素沿着X轴平移x像素- translateY(y) ：将元素沿着Y轴平移y像素- translate(x,y) ：将元素沿着X轴平移x像素，Y轴平移y像素

CSS3平移示例

示例代码如下:
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-transform: translate(50px,50px);
    transform: translate(50px,50px);
}
    

JavaScript 实现平移

除了使用CSS3的transform属性外，还可以使用JavaScript实现平移。

JavaScript平移示例

示例代码如下:
var box = document.getElementById("box");
    box.style.position = "absolute";
    box.style.left = "0px";
    box.style.top = "0px";
function move(){
    box.style.left = parseInt(box.style.left) + 10+"px";
    box.style.top = parseInt(box.style.top) + 10+"px";
    setTimeout(move,50);
}
    move();
    

总结

CSS3平移与JavaScript平移各有优缺点，选择使用哪种方式需要根据实际情况而定。当然，在实现效果一致的情况下，使用CSS3平移更加简单、方便。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！