css平移

目录一、变形就是指通过CSS来改变元素的形状或位置二、平移如何使元素在页面的正中大小不确定，仅被内容撑开)三、z轴平移（并没有改变元素的大小）一、变形就是指通过CSS来改变元素的形状或位置变形不会影响到页面的布局transform 用来设置元素的变形效果平移：translateX() 沿着x轴方向平移translateY() 沿着y轴方向平移translateZ() 沿着z轴方向平移平移元素，百分

该编程了

5957人浏览 · 2022-05-04 12:31:02

该编程了 · 2022-05-04 12:31:02 发布

一、变形就是指通过CSS来改变元素的形状或位置

二、平移如何使元素在页面的正中大小不确定，仅被内容撑开)

三、z轴平移（并没有改变元素的大小）

一、变形就是指通过CSS来改变元素的形状或位置

变形不会影响到页面的布局
transform 用来设置元素的变形效果
平移：

translateX() 沿着x轴方向平移

translateY() 沿着y轴方向平移

translateZ() 沿着z轴方向平移

平移元素，百分比是相对于自身计算的

transform: translateY(-100px);

transform: translateX(100%);

多方位平移使用中间用空格隔开

transform: translateX(50px) translateY(-50px);

举个例子

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgba(208, 197, 197, 0.8);
        }
        .box1,.box2{
            width: 200px;
            height: 300px;
            background-color: #fff;
            float: left;
            margin: 200px 10px;
            transition: all .3s;
        }
        div:hover{
            transform: translateY(-4px);
            box-shadow: 0px 0px 10px rgba(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

二、平移如何使元素在页面的正中大小不确定，仅被内容撑开)

只需加入以下属性

left: 50%;

top: 50%;

transform: translateX(-50%) translateY(-50%);

三、z轴平移（并没有改变元素的大小）

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页的视距。

注：视距是给元素的父元素设置！

举个例子

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* 设置当前网页的视距为400px，人眼距离网页的距离 */
            perspective: 400px;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: hotpink;
            transition: 1s;
        }
        div:hover{
            transform: translateZ(200px);
            /* 设置为400px，则元素铺满整个网页 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>