3D转换

特点

  • 近大远小
  • 物体后面遮挡看不见

三维坐标系

  • x轴:水平向右(右正左负)
  • y轴:垂直向下(下正上负)
  • z轴:垂直屏幕(外正内负)

位移

3D移动在2D移动基础上多加了一个z轴
transform:translateX(100px)在x轴上移动
transform:translateY(100px)在y轴上移动
transform:translateZ(100px)在z轴上移动(一般用px单位)
transform:translate3d(x,y,z)其中x y z分别是指要移动的轴的方向的距离

透视

  • 透视(perspective)我们也称为视距:人的眼睛到屏幕的距离
  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小
  • 透视单位是像素
  • 透视写在被观察元素的父盒子上
js 复制代码
<style>
        body{
            perspective: 500px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
  • d:视距
  • z:z轴,物体距离屏幕,z轴越大(正值)我们看到的物体就越大

旋转

3D旋转可以让元素在三维平面内沿着X轴Y轴Z轴或者自定义轴旋转
transform:rotateX(45deg)沿着X轴正方向旋转45度
transform:rotateY(45deg)沿着Y轴正方向旋转45度
transform:rotateZ(45deg)沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg为角度,不需要沿着哪个轴转哪个轴就赋值为0

左手准则
  • 左手拇指指向轴正方向
  • 其余手指弯曲的方向就是该元素沿着轴旋转的方向(正值)

呈现

transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style:flat子元素不开启3d立体空间,默认
  • transform-style:preserve-3d子元素开启立体空间
  • 代码写给父级,但影响的是子盒子
js 复制代码
<style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(60deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            background-color: blue;
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div></div>
相关推荐
汉得数字平台2 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹9 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互