CSS3+js绘制3D圣诞树

最新推荐文章于 2022-12-22 21:35:02 发布

「已注销」

最新推荐文章于 2022-12-22 21:35:02 发布

阅读量2k

点赞数 1

文章标签： javascript css3 3d

本文链接：https://blog.csdn.net/m0_62505136/article/details/122136988

版权

本文介绍如何使用CSS3的3D变换和JavaScript动态添加节点来绘制一个3D圣诞树。内容包括CSS3的3D变换原理，如空间直角坐标系、transform属性和transform-style的使用，以及DOM节点操作。通过HTML、CSS和JavaScript的结合，最终实现了一棵立体的3D圣诞树。

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

最近大家都在用代码写圣诞树，我也跟个风吧！

主要技术：

1.CSS3的3D变换

2.DOM动态添加节点

开发环境：vscode

一.引入

我们是来写圣诞树的，首先必须弄到一张设计稿：

这里，我第一时间就想到了MC的云杉，因为它和圣诞树长得很像（误）：这里介绍了云杉树的详细结构

树叶贴图：

树干贴图：

二、基本知识

1.CSS3的3D变换

(1).空间直角坐标系

CSS3的空间直角坐标系如图，和数学上的不太一样：y轴正方向是竖直向下的。

(2).transform详解

transform是CSS3的新特性，它可以接受的参数有：translate，rotate，scale等。多个参数之间用空格隔开。

translate可以沿坐标轴平移元素且会保留原来所占的位置（类似相对定位），分为三种，分别为translateX()，translateY()，translateZ()。它们都只接受一个参数，参数必须写明单位。

这三种translate可以简化为translate3d()。以下两种写法是等价的：

.d1{
    transform: translateX(200px) translateY(300px) translateZ(100px);
}

.d2{
    transform: translate3d(200px,300px,100px);
}

translateZ()只有设置了perspective属性才起作用，它主要用于产生一种“近大远小”的感觉。

perspective表示视距，即观察者和屏幕的距离。而translateZ()表示物体到屏幕的距离。人的视线经过物体的边界，投射到屏幕上，形成我们所看到的像。

以下是解释透视现象的经典图片：这里的d就是perspective，z就是translateZ()。

rotate也分为三种：rotateX()，rotateY()，rotateZ()。它们也只接收一个参数，常用单位为deg（°）。还有一种rotate()，它与rotateZ()等价，即在二维平面上进行旋转。

不要使用rotate3d()，它使用前三个参数构造一个空间向量，再以这个向量为轴，按照第四个参数进行旋转。如下：

.d3 {
    transform: rotate3d(1,0,0,45deg);
    /*绕X轴旋转+45度*/
}

3D旋转总会碰到一个问题：角度到底是正是负？有一个“左手定则”可以解决这个问题。（大家凑合着这张图看看吧）左手握住坐标轴，大拇指指向坐标轴正方向，四指弯曲方向就是旋转角的正方向。

当我们在一个transform中同时写translate和rotate属性时，建议的写法是先写translate，再写rotate，因为rotate过程中会改变坐标轴的指向，导致translate不能按预期的那样平移。

(3).transform-style

这个属性作用于父元素上，需要手动设置为preserve-3d。否则，在父元素作3D变换的过程中，子元素就会失去3D效果。

2.DOM节点操作

创建节点：document.createElement('元素类型名');
```
var div=document.createElement('div');
```
返回子节点组成的数组：父节点.children
```
var spans = div.children;
console.log(spans[0]);//<span>aaa<span>
console.log(spans[1]);//<span>bbb<span>
```
spans实际上是一个伪数组，它具有length属性。

在父节点尾部添加节点：父节点.appendChild(子节点);

var ul = document.querySelector('ul');
var li = document.createElement('li');
ul.appendChild(li);

三、实现

1.HTML

由于使用了动态创建节点，所以，除了引入css和js之外，无需写任何其他代码~

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="tree.js"></script>
</head>

<body>

</body>

</html>

2.CSS

透视perspective定义在body中，数值越大，视角越小；

定义了一个发光动画light，用于dec的闪烁效果；

三种方块：完整大小（64*64*64）的leaves和wood，不完整（64*64*8）的snow，最小的（8*8*8）的dec；

六个面的绘制使用3d变换完成；

定义了“层”layer，因为需要分8层绘制。

* {
    padding: 0;
    margin: 0;
}

@keyframes light {
    0% {
        box-shadow: 0px 0px 4px rgb(255, 230, 0);
    }
    100% {
        box-shadow: 0px 0px 16px rgb(255, 230, 0);
    }
}

body {
    position: relative;
    perspective: 1500px;
    background: url(bg2.jpg) no-repeat;
    background-size: cover;
}

.box {
    position: absolute;
    height: 500px;
    width: 500px;
    left: 500px;
    top: 600px;
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    transform: translateY(0);
}

.cube {
    position: absolute;