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轴向外移动一般是正值,向内移动是负值。

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码