css3 translate 不停

CSS3中的transform属性可以实现元素的平移、旋转、缩放等效果，其中translate(位移)可以实现元素在水平和垂直方向上的移动。下面来介绍translate的使用方法和效果。

    transform: translate(x,y);
    

使用translate时，需要指定元素在水平和垂直方向上的移动距离，即x和y的值。这里的值可以为px、em、rem等长度单位，也可以为百分比。为正值时表示向右或向下移动，为负值时表示向左或向上移动。

    transform: translate(50px, 100px);
    

上述代码表示向右移动50px，向下移动100px。

    transform: translate(-50%, -50%);

上述代码表示向左移动50%，向上移动50%。

使用translate不仅可以实现元素的移动，也可以实现一些动画效果。例如，在鼠标悬浮在一个图片上时，将图片向右移动50px。

    img:hover {
            transform: translate(50px,0);
            transition: transform 0.5s ease;
    }

上述代码中，使用:hover选择器绑定鼠标悬浮事件，在hover时为img元素添加translate的样式。transition属性则指定了在样式变化时的过渡效果。

除了在动画效果中使用之外，translate还可以用于响应式网页设计中。例如，当手机横屏时，将某个元素向上移动一段距离，以适应移动设备屏幕的尺寸。

    @media screen and (orientation: landscape) {
        .class {
                transform: translate(0, -50%);
        }
    }
    

@media查询用于设置响应式网页设计，在横屏时，.class类元素将向上移动50%的高度，以便适应移动设备的尺寸。

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