微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML5+CSS3(3)

3D

简称3维坐标系 比二维坐标系多一个Z轴

在这里插入图片描述

3D位移

3D位移在2D的基础上多一个可移动的Z轴

transform: translate3d(x,y,z);

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

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
      
        
        .Box {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 位移3D的写法 */
            /* transform: translate3d(200px, 200px, 200px); */
            /* 或者可以这样写 */
            transform: translateX(400px) translateY(400px) translateZ(400px);
        }
    </style>
</head>

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

</html>



在这里插入图片描述

注意事项

  • x轴 y轴一般用px及百分比当做单位
  • z轴一般用px当做单位,必须借助透视功能
  • z轴向外移动一般是正值,向内移动是负值。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。