首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

CSS3 3D 技术手把手教你玩转

Posted in Javascript onSeptember 02, 2016

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

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

我们看一个效果，是不是很酷炫：直接访问https://bupt-hjm.github.io/css3-3d/，觉得可以的话记得给star咯hh

第一步：html结构

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

<div class="container">
 <div class="piece-box">
  <div class="piece piece-1"></div>
  <div class="piece piece-2"></div>
  <div class="piece piece-3"></div>
  <div class="piece piece-4"></div>
  <div class="piece piece-5"></div>
  <div class="piece piece-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: 300px auto;
 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,因为我们的3Dtransform还没开始

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: 300px auto;
 perspective-origin: 50% 50%;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 animation: pieceRotate 5s;
 -moz-animation: pieceRotate 5s; /* Firefox */
 -webkit-animation: pieceRotate 5s; /* Safari and Chrome */
 -o-animation: pieceRotate 5s ; /* Opera */
}
/*走马灯动画*/
@keyframes pieceRotate
{
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-keyframes pieceRotate
{
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);}
}
/* Safari and Chrome */
@-webkit-keyframes pieceRotate
{
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-keyframes pieceRotate
{
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: piece1Rotate 5s 5s;
  -moz-animation: piece1Rotate 5s 5s; /* Firefox */
  -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
  -o-animation: piece1Rotate 5s 5s; /* Opera */
  -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
  animation-fill-mode: forwards;
 }
/*front*/
 @keyframes piece1Rotate
 {
 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-keyframes piece1Rotate
 {
 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);}
 }
 /* Safari and Chrome */
 @-webkit-keyframes piece1Rotate
 {
 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-keyframes piece1Rotate
 {
 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, 如下

<div class="container">
 <div class="piece-box">
  <div class="piece-box2"><!--新加的容器-->
   <div class="piece piece-1"></div>
   <div class="piece piece-2"></div>
   <div class="piece piece-3"></div>
   <div class="piece piece-4"></div>
   <div class="piece piece-5"></div>
   <div class="piece piece-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: boxRotate 5s 10s infinite;
 -moz-animation: boxRotate 5s 10s infinite; /* Firefox */
 -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
 -o-animation: boxRotate 5s 10s infinite; /* Opera */
}
/*正方体旋转动画*/
@keyframes boxRotate
{
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-keyframes boxRotate
{
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);}
}
/* Safari and Chrome */
@-webkit-keyframes boxRotate
{
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-keyframes boxRotate
{
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);}
}

最后效果，大功告成！

以上就是对CSS 3D的实现例子，有需要的同学可以参考下，谢谢大家对本站的支持！

CSS3 3D 技术手把手教你玩转

- Author -

HJM

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
javascript入门教程基础篇
Nov 16 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
js实现鼠标左右移动，图片也跟着移动效果
Jan 25 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
js实现StringBuffer的简单实例
Sep 02 #Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 #Javascript
vue.js入门教程之绑定class和style样式
Sep 02 #Javascript
js绘制购物车抛物线动画
Nov 18 #Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 #Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
Sep 02 #Javascript
node.js中module.exports与exports用法上的区别
Sep 02 #Javascript
turtle(1) blinker(1) 定时任务(2) MYSQL函数(1) 信号库(1) mysql.user(1) 计时器(1) limit(1) 绘图(1) Mysql报错(1)
You might like
PHP 已经成熟
2006/12/04 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
YII框架常用技巧总结
2019/04/27 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python中常用信号signal类型实例
2018/01/25 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
HTML5边玩边学（3）像素和颜色
2010/09/21 HTML / CSS
alice McCALL官网：澳大利亚时尚品牌
2020/11/16 全球购物
俄罗斯品牌服装在线商店：VIPAVENUE
2020/08/10 全球购物
公司出纳岗位职责
2013/12/07 职场文书
高二化学教学反思
2014/01/30 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
父亲节感言
2015/08/03 职场文书