2d的平移

chill_ly

已于 2022-03-27 17:46:42 修改

阅读量98

点赞数

分类专栏：一阶段文章标签： css html javascript

于 2022-03-01 20:43:46 首次发布

本文链接：https://blog.csdn.net/qq_53640252/article/details/123215525

版权

一阶段专栏收录该内容

13 篇文章 0 订阅

订阅专栏

平移

①translateX(x轴移动的距离) 正值向右，负值向左

例如：transform: translateX(200px);

②translateY(y轴移动的距离) 正值向下，负值向上

例如：transform: translateY(200px);

③translate(x轴移动的距离，y轴移动的距离)

简写：transform: translate(200px, 200px);

注意：transform: translate(50%, 50%); 使用百分比来表示像素值，指的是自身的百分比

<style>
        .big{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        .small{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 1s;
        }
        .big:hover .small{
            /* 水平平移 */
            /* transform: translateX(200px); */
            /* 垂直平移 */
            /* transform: translateY(200px); */
            /* 简写 */
            /* transform: translate(200px,200px); */
            /* 如果使用百分比来表示像素值，指的是自身的百分比 */
            transform: translate(50%,50%);
        }
</style>
    <div class="big">
        <div class="small">small</div>
    </div>