服务器之家：专注于服务器技术及软件下载分享
分类导航

Linux|Centos|Ubuntu|系统进程|Fedora|注册表|Bios|Solaris|Windows7|Windows10|Windows11|windows server|

服务器之家 - 服务器系统 - Linux - 教你玩会 CSS3 3D 技术

教你玩会 CSS3 3D 技术

2023-10-12 20:43未知服务器之家 Linux

css3的3d起步 要玩转css3的3d，就必须了解几个词汇，便是透视( perspective )、旋转( rotate )和移动( translate )。 透视 即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。 旋转 则不再是2D平面上的旋转，而是三维坐标系的旋转，就

css3的3d起步

要玩转css3的3d，就必须了解几个词汇，便是透视( perspective)、旋转( rotate)和移动( translate)。 透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。 旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。 平移同理。

当然用理论来说明，估计你还不明白。下面是3个gif：

  • 沿着X轴旋转
    教你玩会 CSS3 3D 技术
  • 沿着Y轴旋转
    教你玩会 CSS3 3D 技术
  • 沿着Z轴旋转
    教你玩会 CSS3 3D 技术

旋转应该没问题了，那理解平移起来就比较容易了，就是在在X轴、Y轴、z轴移动。

你可能会说透视比较不好理解，下面我介绍一下透视的几个属性。

perspective

perspective英文名便是透视，没有这东西就没办法形成3D效果，但是这个东西是怎么让我们浏览器形成3D 效果的呢，可以看下面这张图，其实学过绘画的应该知道透视关系，而这里就是这个道理。

教你玩会 CSS3 3D 技术

但是在css里它是有数值的，例如 perspective: 1000px这个代表什么呢？我们可以这样理解，如果我们直接眼睛靠着物体看，物体就超大占满我们的视线，我们离它距离越来越大，它在变小，立体感也就出来了是不是，其实这个数值构造了一个我们眼睛离屏幕的距离，也就构造了一个虚拟3D假象。

perspective-origin

由上面我们了解了 perspective，而加上了这个 origin是什么，我们前面说的这个是眼睛离物体的距离，而这个就是眼睛的视线，我们的视点的不同位置就决定了我们看到的不同景象，默认是中心，为 perspectice-origin: 50% 50%,第一个数值是 3D 元素所基于的 X 轴，第二个定义在 y 轴上的位置

当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。必须与 perspective 属性一同使用，而且只影响 3D 转换元素。(W3school)

教你玩会 CSS3 3D 技术

transform-style

perspective又来了，没错，它是css中3D的关键， transform-style默认是 flat，如果你要在元素上视线3D效果的话，就必须用上 transform-style: preserve-3d,否则就只是平面的变换，而不是3D的变换

手把手带你玩转css3-3d

以上我们稍微了解概念，下面就开始实战吧！

我们看一个效果，是不是很酷炫~

教你玩会 CSS3 3D 技术

如果图片加载不出来，就直接访问 ，觉得可以的话记得给star咯hh

第一步：html结构

很简单的一个容器包裹着一个装了6个 piece的 piece-box

<divclass="container">
<divclass="piece-box">
<divclass="piecepiece-1"></div>
<divclass="piecepiece-2"></div>
<divclass="piecepiece-3"></div>
<divclass="piecepiece-4"></div>
<divclass="piecepiece-5"></div>
<divclass="piecepiece-6"></div>
</div>
</div>
第二步： 加上必要的3D属性，进入3D世界

通过上面的讲解，应该对 perspective比较熟悉了吧,

/*容器*/
.container{
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
perspective:1000px;
}
/*piece盒子*/
.piece-box{
perspective-origin:50%50%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
第三步：加入必要的样式 
/*容器*/
.container{
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
perspective:1000px;
}
/*piece盒子*/
.piece-box{
position:relative;
width:200px;
height:200px;
margin:300pxauto;
perspective-origin:50%50%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
/*piece通用样式*/
.piece{
position:absolute;
width:200px;
height:200px;
background:red;
opacity:0.5;
}
.piece-1{
background:#FF6666;
}
.piece-2{
background:#FFFF00;
}
.piece-3{
background:#006699;
}
.piece-4{
background:#009999;
}
.piece-5{
background:#FF0033;
}
.piece-6{
background:#FF6600;
}

当然，在你完成这步之后你还是只看到一个正方形，也就是我们的 piece-6,因为我们的3D transform还没开始

教你玩会 CSS3 3D 技术

第四步：3D变换来袭

首先是实现走马灯，我们先不要让它走，先实现灯部分。

如何实现呢？因为要构成一个圆，圆是360度，而我们有6个piece，那么，很容易想到，我们需要把每一个piece以递增60度的方式 rotateY，就变成如下

教你玩会 CSS3 3D 技术
如何把他们从中心拉开呢？

这里我们还要注意一点，在我们使元素绕Y轴旋转以后，其实X轴和Z轴也会跟着旋转，所所以正方体的每个面的垂直线还是Z轴，我们就只需要改变下 translateZ的值,而当 translateZ为正的时候，就朝着我们的方向走来，这样就可以拉开了

但是拉开的距离如何衡量？

教你玩会 CSS3 3D 技术

是不是一目了然了~

下面我们再修改下css

.piece-1{
background:#FF6666;
-webkit-transform:rotateY(0deg)translateZ(173.2px);
-ms-transform:rotateY(0deg)translateZ(173.2px);
-o-transform:rotateY(0deg)translateZ(173.2px);
transform:rotateY(0deg)translateZ(173.2px);
}
.piece-2{
background:#FFFF00;
-webkit-transform:rotateY(60deg)translateZ(173.2px);
-ms-transform:rotateY(60deg)translateZ(173.2px);
-o-transform:rotateY(60deg)translateZ(173.2px);
transform:rotateY(60deg)translateZ(173.2px);
}
.piece-3{
background:#006699;
-webkit-transform:rotateY(120deg)translateZ(173.2px);
-ms-transform:rotateY(120deg)translateZ(173.2px);
-o-transform:rotateY(120deg)translateZ(173.2px);
transform:rotateY(120deg)translateZ(173.2px);
}
.piece-4{
background:#009999;
-webkit-transform:rotateY(180deg)translateZ(173.2px);
-ms-transform:rotateY(180deg)translateZ(173.2px);
-o-transform:rotateY(180deg)translateZ(173.2px);
transform:rotateY(180deg)translateZ(173.2px);
}
.piece-5{
background:#FF0033;
-webkit-transform:rotateY(240deg)translateZ(173.2px);
-ms-transform:rotateY(240deg)translateZ(173.2px);
-o-transform:rotateY(240deg)translateZ(173.2px);
transform:rotateY(240deg)translateZ(173.2px);
}
.piece-6{
background:#FF6600;
-webkit-transform:rotateY(300deg)translateZ(173.2px);
-ms-transform:rotateY(300deg)translateZ(173.2px);
-o-transform:rotateY(300deg)translateZ(173.2px);
transform:rotateY(300deg)translateZ(173.2px);
}

是不是已经实现了走马灯了？

教你玩会 CSS3 3D 技术

第五步：animation让3D动起来

要实现走马灯动，其实很简单，我们只要在 piece-box上加上旋转动画就行了,5s完成动画，从0度旋转到360度

/*piece盒子*/
.piece-box{
position:relative;
width:200px;
height:200px;
margin:300pxauto;
perspective-origin:50%50%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
animation:pieceRotate5s;
-moz-animation:pieceRotate5s;/*Firefox*/
-webkit-animation:pieceRotate5s;/*SafariandChrome*/
-o-animation:pieceRotate5s;/*Opera*/
}
/*走马灯动画*/
@keyframespieceRotate
{
0%{-webkit-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);}
}
/*Firefox*/
@-moz-keyframespieceRotate
{
0%{-webkit-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);}
}
/*SafariandChrome*/
@-webkit-keyframespieceRotate
{
0%{-webkit-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);}
}
/*Opera*/
@-o-keyframespieceRotate
{
0%{-webkit-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);}
}

这里就不放gif了~hhh是不是实现了酷炫的效果，还没结束哦~更酷炫的正方体组装

正方体，其实也不难实现，我这里就不很详细说了，你首先可以想象一个面，然后去拓展其他面如何去实现，比如我们把正方体的前面 translateZ(100px）让它靠近我们100px,然后后面 translateZ(-100px）让它远离我们100px,左边是先 translateX(-100px再 rotateY(90deg),右边就是 translateX(100px)再 rotateY(90deg),上面是先 translateY(-100px)， rotateX(90deg)，下面是先 translateY(100px)， rotateX(90deg)，只要我们写进动画，一切就大功告成。

css就为如下，以下就只放 piece1，其他读者可以自己类比实现，或者看我github的源码

.piece-1{
background:#FF6666;
-webkit-transform:rotateY(0deg)translateZ(173.2px);
-ms-transform:rotateY(0deg)translateZ(173.2px);
-o-transform:rotateY(0deg)translateZ(173.2px);
transform:rotateY(0deg)translateZ(173.2px);
animation:piece1Rotate5s5s;
-moz-animation:piece1Rotate5s5s;/*Firefox*/
-webkit-animation:piece1Rotate5s5s;/*SafariandChrome*/
-o-animation:piece1Rotate5s5s;/*Opera*/
-webkit-animation-fill-mode:forwards;/*Chrome,Safari,Opera*/
animation-fill-mode:forwards;
}
/*front*/
@keyframespiece1Rotate
{
0%{-webkit-transform:rotateY(0deg)translateZ(173.2px);
-ms-transform:rotateY(0deg)translateZ(173.2px);
-o-transform:rotateY(0deg)translateZ(173.2px);
transform:rotateY(0deg)translateZ(173.2px);}
100%{-webkit-transform:rotateY(0deg)translateZ(100px);
-ms-transform:rotateY(0deg)translateZ(100px);
-o-transform:rotateY(0deg)translateZ(100px);
transform:rotateY(0deg)translateZ(100px);}
}
/*Firefox*/
@-moz-keyframespiece1Rotate
{
0%{-webkit-transform:rotateY(0deg)translateZ(173.2px);
-ms-transform:rotateY(0deg)translateZ(173.2px);
-o-transform:rotateY(0deg)translateZ(173.2px);
transform:rotateY(0deg)translateZ(173.2px);}
100%{-webkit-transform:rotateY(0deg)translateZ(100px);
-ms-transform:rotateY(0deg)translateZ(100px);
-o-transform:rotateY(0deg)translateZ(100px);
transform:rotateY(0deg)translateZ(100px);}
}
/*SafariandChrome*/
@-webkit-keyframespiece1Rotate
{
0%{-webkit-transform:rotateY(0deg)translateZ(173.2px);
-ms-transform:rotateY(0deg)translateZ(173.2px);
-o-transform:rotateY(0deg)translateZ(173.2px);
transform:rotateY(0deg)translateZ(173.2px);}
100%{-webkit-transform:rotateY(0deg)translateZ(100px);
-ms-transform:rotateY(0deg)translateZ(100px);
-o-transform:rotateY(0deg)translateZ(100px);
transform:rotateY(0deg)translateZ(100px);}
}
/*Opera*/
@-o-keyframespiece1Rotate
{
0%{-webkit-transform:rotateY(0deg)translateZ(173.2px);
-ms-transform:rotateY(0deg)translateZ(173.2px);
-o-transform:rotateY(0deg)translateZ(173.2px);
transform:rotateY(0deg)translateZ(173.2px);}
100%{-webkit-transform:rotateY(0deg)translateZ(100px);
-ms-transform:rotateY(0deg)translateZ(100px);
-o-transform:rotateY(0deg)translateZ(100px);
transform:rotateY(0deg)translateZ(100px);}
}

细心的读者可以发现我用了一个 animation-fill-mode: forwards;,这个其实就是让这些 piece保持动画最后的效果，也就是正方体的效果，读者可以不加试试看，那还是会恢复原样。

最后就是正方体的旋转了，前面我们的容器已经用过 animation了,读者可能会想我再加个class放 animaiton不就行了，hhh， animaiton会覆盖掉前面的，那前面的走马灯的动画就没了，所以在html结构中，我再加了一个 box包裹 piece, 如下

<divclass="container">
<divclass="piece-box">
<divclass="piece-box2"><!--新加的容器-->
<divclass="piecepiece-1"></div>
<divclass="piecepiece-2"></div>
<divclass="piecepiece-3"></div>
<divclass="piecepiece-4"></div>
<divclass="piecepiece-5"></div>
<divclass="piecepiece-6"></div>
</div>
</div>
</div>

在动画上我们可以控制正方体动画的延时时间，就是等到正方体组装完成后再开始动画

animation: boxRotate 5s 10s infinite;第一个5s是动画时长，第二个10s是延时时间，然后我们让正方体的旋转，绕X轴从0度到360度,绕Y轴也0到Y轴360度。

.piece-box2{
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
animation:boxRotate5s10sinfinite;
-moz-animation:boxRotate5s10sinfinite;/*Firefox*/
-webkit-animation:boxRotate5s10sinfinite;/*SafariandChrome*/
-o-animation:boxRotate5s10sinfinite;/*Opera*/
}
/*正方体旋转动画*/
@keyframesboxRotate
{
0%{-webkit-transform:rotateX(0deg)rotateY(0deg););
-ms-transform:rotateX(0deg)rotateY(0deg););
-o-transform:rotateX(0deg)rotateY(0deg););
transform:rotateX(0deg)rotateY(0deg););}
100%{-webkit-transform:rotateX(360deg)rotateY(360deg);
-ms-transform:rotateX(360deg)rotateY(360deg);
-o-transform:rotateX(360deg)rotateY(360deg);
transform:rotateX(360deg)rotateY(360deg);}
}
/*Firefox*/
@-moz-keyframesboxRotate
{
0%{-webkit-transform:rotateX(0deg)rotateY(0deg););
-ms-transform:rotateX(0deg)rotateY(0deg););
-o-transform:rotateX(0deg)rotateY(0deg););
transform:rotateX(0deg)rotateY(0deg););}
100%{-webkit-transform:rotateX(360deg)rotateY(360deg);
-ms-transform:rotateX(360deg)rotateY(360deg);
-o-transform:rotateX(360deg)rotateY(360deg);
transform:rotateX(360deg)rotateY(360deg);}
}
/*SafariandChrome*/
@-webkit-keyframesboxRotate
{
0%{-webkit-transform:rotateX(0deg)rotateY(0deg););
-ms-transform:rotateX(0deg)rotateY(0deg););
-o-transform:rotateX(0deg)rotateY(0deg););
transform:rotateX(0deg)rotateY(0deg););}
100%{-webkit-transform:rotateX(360deg)rotateY(360deg);
-ms-transform:rotateX(360deg)rotateY(360deg);
-o-transform:rotateX(360deg)rotateY(360deg);
transform:rotateX(360deg)rotateY(360deg);}
}
/*Opera*/
@-o-keyframesboxRotate
{
0%{-webkit-transform:rotateX(0deg)rotateY(0deg););
-ms-transform:rotateX(0deg)rotateY(0deg););
-o-transform:rotateX(0deg)rotateY(0deg););
transform:rotateX(0deg)rotateY(0deg););}
100%{-webkit-transform:rotateX(360deg)rotateY(360deg);
-ms-transform:rotateX(360deg)rotateY(360deg);
-o-transform:rotateX(360deg)rotateY(360deg);
transform:rotateX(360deg)rotateY(360deg);}
}

最后效果，大功告成！

教你玩会 CSS3 3D 技术

原文来自：


延伸 · 阅读

精彩推荐
最近更新
编辑推荐
阅读排行
热门标签
530 　 80 　 807 　 rpm 　 Linux命令 　 文件处理 　 Shell 　 通配符 　 元字符 　 转义符 　 硬链接 　 软链接 　 linux系统 　 df命令 　 wc命令 　 磁盘分区 　 定时执行任务 　 crontab 　 代码 　 集群 　 SSH 　 免密码访问 　 文件编 　 Ext2 　 Ext3 　 Ext4 　 VI 　 VIM 　 无权限 　 保存 　
© 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图