3D转换

最新推荐文章于 2024-08-29 09:49:42 发布

辰逸博客

最新推荐文章于 2024-08-29 09:49:42 发布

阅读量811

点赞数 2

分类专栏： css 文章标签： 3D转换透视 perspective 3D移动 translate3d 3D旋转 rotate3d 3D呈现transform-style

本文链接：https://blog.csdn.net/chenyiboke/article/details/103104980

版权

本文介绍了3D转换的关键概念，包括三维坐标系、3D移动translate3d、透视perspective、3D旋转rotate3d以及3D呈现transform-style。通过实例演示了如何使用这些属性实现3D效果，如沿着x、y、z轴的旋转，并提供了相关代码展示。

摘要由CSDN通过智能技术生成

3D 转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。



**有什么特点：**

 近大远小。
 物体后面遮挡不可见。
 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

1. 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

        x轴 ： 水平向右     注意： x右边是正值，左边是负值。
        y轴 ： 垂直向下     注意 ： y下面是正值，上面是负值。
        z轴 ： 垂直屏幕     注意 ： 往外面是正值，往里面是负值。

在这里插入图片描述

3D 转换我们主要学习工作中最常用的3D位移和 3D 旋转

主要知识点

3D位移：translate3d（x，y，z）
3D旋转：rotate3d（x，y，z）
透视：perspective
3D呈现transform-style

2. 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

	translform：translateX（100px） ： 仅仅是在x轴上移动
    translform：translateY（100px） ： 仅仅是在Y轴上移动
    translform：translateZ（100px） ： 仅仅是在Z轴上移动(注意：translateZ一般用px单位)
    translform：translate3d（x，y，z） ： 其中x,y,z分别指要移动的轴的方向的距离

举个例子：

命令演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
   
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px; 
        }
        div{
   
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            margin: 0px auto;
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1. translateZ 沿着Z轴移动 
                2. translateZ 后面的单位我们一般跟px*/
                /* 3. translateZ（100px） 向外移动100px */
                /* 4. 3D移动有简写的方法 */
                /* transform: translate3d(x,y,z); */
                /* transform: translate3d(100px,100px,100px); */
                /* 5. xyz是不能省略的，如果没有就写0 */
                transform: translate3d(100px,100px,100px