css空间转换

黄昏终结者

已于 2022-08-27 09:10:51 修改

阅读量422

点赞数 1

文章标签：前端 javascript css html css3

于 2022-04-22 10:15:00 首次发布

本文链接：https://blog.csdn.net/m0_62181310/article/details/124211586

版权

使用位移、缩放、旋转等空间转换效果丰富网页呈现效果

空间转换

坐标轴:X、Y、Z

属性:transform

空间位移:

语法:

⚫ transform: translate3d(x, y, z);

⚫ transform: translateX(值);

⚫ transform: translateY(值);

⚫ transform: translateZ(值);

取值（正负均可）:

⚫ 像素单位数值

⚫ 百分比

复合属性:

transform: translateX() translateY() translateZ();

注:transform: translate3d() 里面必须书写3个值

空间位移效果展示:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>空间位移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }
    .box:hover {
      transform: translateX(50px) translateY(50px) translateZ(100px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

透视:

产生近大远小,近实远虚的视觉效果

写法:perspective:值;

添加给父级

取值一般在800-1200px之间

注:z正数方向移动200px是放大效果,负数是缩小效果

透视效果展示:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(-200px);
    }
    body {
      perspective: 1000px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

空间旋转

旋转:

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

左手法则:左手握住旋转轴,大拇指指向坐标轴正值方向,四根手指弯曲方向为旋转正值方向

效果展示:

空间旋转-X轴

<!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>空间旋转-X轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateX(50deg);
            transform: rotateX(-50deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

空间旋转-Y轴:

<!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>空间旋转-Y轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box {
            perspective: 1000px;
        }

        .box img:hover {
            transform: rotateY(60deg);
            transform: rotateY(-60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>

立体呈现:

让子级处于真正的3D空间内

写法:

transform-style:preserve-3d

添加给父级

子级处于3D空间里面

效果展示:

<!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>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            /* 变成立方体 */
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
        }

        .front {
            transform: translateZ(200px);
            background-color: orange;
        }

        .back {
            background-color: green;
        }
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

缩放

写法:transform: scale3d(x, y, z);

某个坐标轴缩放:

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

黄昏终结者

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css空间转换

目录空间转换空间位移:透视:空间旋转立体呈现:缩放使用位移、缩放、旋转等空间转换效果丰富网页呈现效果空间转换坐标轴:X、Y、Z 属性:transform空间位移:语法:⚫ transform: translate3d(x, y, z);⚫ transform: translateX(值);⚫ transform: translateY(值);⚫ transform: translateZ(值);取值（正负均可）:⚫ 像素单位数值⚫
复制链接

扫一扫