css transform_translate()2.html

CSS transform: translate 示例

转载于 2019-07-19 16:03:00 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/zhaosijia----1234/p/9389455.html

CSS 专栏收录该内容

71 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用 CSS 的 transform: translate 属性来改变元素的位置。示例中，一个 100x100 像素的方块被设置了一个 150 像素的水平和垂直位移，清晰地说明了 translate 的用法。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_transform_translate()2</title>
    <style>
        /*参考：https://www.cnblogs.com/zhaosijia----1234/p/9389455.html*/
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 500px;
            height: 500px;
            background-color: #cccccc;
            margin: 0 auto;
        }

        .container .box {
            width: 100px;
            height: 100px;
            background-color: #1acd7e;
            transform: translate(150px, 150px);
        }

        .container .box2 {
            width: 100%;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="container">
    container 500x500px
    <div class="box">
        div 100x100px
    </div>
    <div class="box2">
        div 500x100px
    </div>
</div>
</body>
</html>