css 实现3D效果

最新推荐文章于 2024-06-26 14:03:25 发布

蓝朽

最新推荐文章于 2024-06-26 14:03:25 发布

阅读量6.1k

点赞数 1

分类专栏：前端相关文章标签： css 3d css3

本文链接：https://blog.csdn.net/lx00000025/article/details/129921609

版权

前端相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS的transform-style和animation属性创建一个3D立方体，并通过旋转实现动态效果。首先，定义了立方体的六个面及其位置，然后设置了容器的视角距离，接着通过transform的translateZ和rotate方法定位各个面。最后，通过@keyframes定义关键帧动画，使立方体沿X轴和Y轴旋转，实现3D翻转效果。

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

一、需要用到的属性

主要用到两个属性：transform-style属性和animation属性
transform-style是用来开启3D效果的属性，而animation是用来让元素实现3D的动画效果
我们以制作一个3D的立方体为例。
transform详细属性，animation详细属性

二、立方体实现

先把html部分写出来，我们需要把立方体的6个面都先表示出来。

<!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="./css/test.css">
</head>
<body >
    <div class="continer">
    <main>
    <!-- 前面-->
    <div class="front"></div>
    <!-- 后面-->
    <div class="back">back</div>
    <!-- 左面-->
    <div class="left">left</div>
    <!-- 右面-->
    <div class="right">right</div>
    <!-- 上面-->
    <div class="top">top</div>
    <!-- 下面-->
    <div class="bottom">bottom</div>
    </main>
</div>
</body>
</html>

上面分别把6个面先定义了出来，接下来是css部分。
代码如下：
第一步：定义容器的大小和位置

.continer {
    width: 300px;
    height: 300px;
    perspective: 800px;
    margin: 200px;
    margin-left: 400px;
}
/*定义容器下的每个面的大小*/
.continer div{
    font-size: 50px;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
}
/*
transform-style: preserve-3d;开启3D效果
main包括了整个立方体的所有div，所以实现动画效果的时候是整体在动
*/
main {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /*第一个参数是关键帧的名字，第二个参数是动画的时长，
    第三个参数是动画从头到尾的速度是相同的。
	第四个参数是播放的次数，infinite是无限次	
	*/
    animation: rotate 1s linear infinite;
}

关键帧我们在后面定义，可以先把animation属性写出来。

其中perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。
上面的描述可能让人难以理解一些，其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。
第二步：画前面的正方形

.front {
    background: rgba(100, 0, 100, 0.6);
    transform: translateZ(150px);
}

效果：
在这里插入图片描述

translateZ(150px)的意思就是将这个div沿着z轴向前移动150px；
在css中,3d属性设置的z轴指的是屏幕到人的眼睛的方向为正方向的轴
每一面的div标签中都写了文字，方便等下理解图形的的旋转和移动。现在还是揉成一坨的，因为其它的div还没给样式。

第三步：画后面的正方形

 .back {
    background: rgba(0, 100, 100, 0.5);
    transform: translateZ(-150px);
}

在这里插入图片描述

translateZ(-150px)就是将div元素向后移动150px，此时可以看到前面和后面的层次关系了，明显紫色在深紫色的前面。

第四步：画出左面

.left {
    background: rgba(100, 1000, 100, 0.5);
    transform: rotateY(90deg) translateZ(-150px);
}

在这里插入图片描述
rotateY(90deg)就是把div沿着y轴旋转90°，然后再用translateZ(-150px)把它向左移动，旋转之后坐标轴也跟着旋转了，所以此时的Z轴是旋转之后的div的前面。
第五步：画出右面

.right {
    background: rgba(1000, 100, 100, 0.5);
    transform: rotateY(90deg) translateZ(150px);
}

在这里插入图片描述
rotateY(90deg)先将div沿着y轴旋转90°，再用translateZ(150px)将div向右移动150px。
第六步：画出上面

.top {
    background: rgba(1000, 0, 0, 0.5);
    transform: rotateX(90deg) translateZ(150px);
}

在这里插入图片描述
rotateX(90deg)将div沿着x轴旋转90°，再用translateZ(150px)向上移动150px；
第七步：画出底面

.bottom {
    background: rgba(0, 0, 1000, 0.5);
    transform: rotateX(90deg) translateZ(-150px);
}

在这里插入图片描述
rotateX(90deg)将div沿着x轴旋转90°，再用translateZ(150px)向下移动150px；
此时可以看到每个面的文字都到了对应的位置，每个面也都画了出来，清晰可见。
第八步：关键帧的定义
这一步就是让立方体实现3d动态效果的关键一步；
代码如下：

@keyframes rotate {
    from {
    	/*
		rotateX(0) rotateY(0)表示从坐标（0，0）开始
		*/
        transform: rotateX(0) rotateY(0);
    }
    to {
        /*
		rotateX(360deg) rotateY(360deg)表示立方体沿着x轴旋转360°后再沿着y轴旋转360°
		在第一步中定义了播放次数为无限次，所以
		*/
        transform: rotateX(360deg) rotateY(360deg);
    }
}

此时立方体就可以动起来了。

CSS完整代码：

.continer {
    width: 300px;
    height: 300px;
    perspective: 800px;
    margin: 200px;
    margin-left: 400px;
}
.continer div{
    font-size: 50px;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
 
}
main {
    width: 100%;
    height: 100%;
    transform: translateZ(-150px);
    transform-style: preserve-3d;
    animation: rotate 1s linear infinite;
}
 
@keyframes rotate {
    from {
        transform: rotateX(0) rotateY(0);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.front {
    background: rgba(100, 0, 100, 0.6);
    transform: translateZ(150px);
}
 .back {
    background: rgba(0, 100, 100, 0.5);
    transform: translateZ(-150px);
}

.left {
    background: rgba(100, 1000, 100, 0.5);
    transform: rotateY(90deg) translateZ(-150px);
}

.right {
    background: rgba(1000, 100, 100, 0.5);
    transform: rotateY(90deg) translateZ(150px);
}

.top {
    background: rgba(1000, 0, 0, 0.5);
    transform: rotateX(90deg) translateZ(150px);
}
 
.bottom {
    background: rgba(0, 0, 1000, 0.5);
    transform: rotateX(90deg) translateZ(-150px);
}