CSS3 transform的常用属性总结

最新推荐文章于 2022-01-26 13:59:26 发布

Wn洋

最新推荐文章于 2022-01-26 13:59:26 发布

阅读量980

点赞数 3

文章标签： transform css3 前端

本文链接：https://blog.csdn.net/qq_43129072/article/details/83148997

版权

transform属性值：

一、transform: translate();

1、translate()函数可以将元素向指定的方向移动，类似于position中的relative。可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
2、translate()的括号内包含两个值，分别为相对于元素原有位置在水平方向和垂直方向的偏移值。
3、向下、向右为正方向
4、如果只想在x轴或者y轴上进行变换，那么属性为translateX(n)和translateY(n)

下面这段代码就是让一个盒子平移并对比不会影响其他的盒子能够真切的显示出translate()不会影响周围其他元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;}
        div:nth-child(1) {background: #00ff00;transform: translate(0, 0);transition: transform 2s linear;}
        div:nth-child(2){background: #ff0000;}
        div:nth-child(1):hover {transform: translate(100px, 100px)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
<

最低0.47元/天解锁文章

Wn洋

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3 transform的常用属性总结

transform属性值：一、transform: translate();1、translate()函数可以将元素向指定的方向移动，类似于position中的relative。可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。2、translate()的括号内包含两个值，分别为相对于元素原有位置在水平方向和垂直方向的偏移值。3、向下、向右为...
复制链接

扫一扫