首页 前端知识 css 实现3D效果

css 实现3D效果

2024-03-24 23:03:18 前端知识 前端哥 827 888 我要收藏

目录

  • 一、需要用到的属性
  • 二、立方体实现

一、需要用到的属性

主要用到两个属性: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);
}
 
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4116.html
标签
3d
评论
发布的文章

jQuery全屏滚动插件fullPage

2024-04-16 17:04:36

jQuery

2024-01-31 12:01:10

flex布局的对齐方式

2024-04-16 17:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!