简单正方体的3d旋转

1.首先搭建正方体模型

代码如下：

body {/* 透视：没有透视不能看到3d效果 */perspective: 1200px;}.content{display: inline-block;position: relative;width: 200px;height: 200px;top: 200px;left: 300px;animation: rotate1 3s linear infinite;transform-style: preserve-3d;}.box {width: 200px;height: 200px;position: absolute;opacity: 0.5;}.red {/* 前 */background-color: red;transform: translate3d(0px, 0px, 100px);}.yellow {/* 上 */background-color: yellow;transform: rotateX(90deg) translate3d(0px, 0px, 100px);}.blue {/* 左 */background-color: blue;transform: rotateY(-90deg) translate3d(0px, 0px, 100px);}.pink {/* 下 */background-color: pink;transform: rotateX(-90deg) translate3d(0px, 0px, 100px)}.green {/* 右 */background-color: green;transform: rotateY(90deg) translate3d(0px, 0px, 100px);}.orange {/* 后 */background-color: orange;transform: translate3d(0px, 0px, -100px);}
}<body><div class="content "><div class="box red">1</div><div class="box yellow">2</div><div class="box blue">3</div><div class="box pink">4</div><div class="box green">5</div><div class="box orange">6</div></div>
</body>

效果图片如下：效果是这样，但是如果想看到其他位置，可以通过调perspective值的大小，就可以看到其他位置的颜色，或者自己一个一个搭建正方形，这样就知道哪个面对应的颜色。

2.使得搭建正方体模型转动

代码如下：将下面的代码复制到style中，也可以自己写。

@keyframes rotate1 {from{/* 这是初始的动画图，也就是上图刚开始动画之前的效果*//*这里可以写成例1.transform: rotateX(0)2.transform: rotateX(0) rotateY(0)这里可以任选两个轴进行旋转，这里就不再一一举例了*/transform: rotateX(0) rotateY(0) rotateZ(0)}to {/*这里可以写成例1.transform: rotateX(360deg)2.transform: rotateX(360deg) rotateY(360deg)这里可以任选两个轴进行旋转，这里就不再一一举例了*/transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)}
}

动画效果：
上面是围绕三个轴在转动，所以我就将其中围绕一个轴转动和两个轴转动的例子在例举出来，这样就更加方便理解动画围绕哪个坐标轴转动了。

围绕一个轴进行转动，例如x轴、y轴、z轴，代码如下：
x轴代码：

/* rotate是动画名，不要忘记启动动画时名字的修改*/
@keyframes rotate {from{transform: rotateX(0) }to {transform: rotateX(360deg)}}

动画效果如下图：

y轴代码：

/* rotate是动画名，不要忘记启动动画时名字的修改*/
@keyframes rotate {from{transform: rotateY(0) }to {transform: rotateY(360deg)}}

效果如下：

z轴代码：

/* rotate是动画名，不要忘记启动动画时名字的修改*/
@keyframes rotate {from{transform: rotateZ(0) }to {transform: rotateZ(360deg)}}

效果如下：

围绕x，y两个轴转动，就以x轴和y轴举例，代码如下：

@keyframes rotate {from{transform: rotateX(0) rotateY(0)}to {transform: rotateX(360deg) rotateY(360deg) }}

动画就不截了，自己可以通过代码看一下动画。
由于之前没有装录频工具，现在给大家补一下gif动画，更方便大家理解。gif如下图：

3.总结

以上就是一个正方体的简单的动画，以及正方体的搭建，希望给予各位大佬帮助。一些更炫酷的动画博主没有做，希望各位可以做出更加炫酷的动画。

简单正方体的3d旋转相关推荐

CSS3 简单3D旋转画册
CSS3 简单3D旋转画册上次我们简单介绍了c3的一些基础知识,我们今天来做一个小练习: 这个简单的案例是3D的一个旋转画册,那么上面是我们的一个效果图,因为不能够传视屏所以就暂时只能够截图来看一下 ...
【3D旋转墙】最简单的3d旋转墙
目录前言 HTML部分源码 CSS部分源码 JS部分源码前言还在为节日不知道送女朋友什么而烦恼?还在为父母不知道计算机专业是写代码而烦恼?还在为母亲节or父亲节送父母礼物父母说不要乱花钱?(当然 ...
【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
程序员送给女朋友的3D旋转相册附背景音乐
送给女朋友的3D旋转相册附背景音乐详细教程及源码如下,简单易上手,亲测有效. 教程如下: 文件建立 spin.css建立 spin.html建立 img文件建立文件建立首先在桌面新建一个名为&qu ...
matlab怎让3d旋转,如何在MATLAB中平滑旋转3D绘图？
我会说这是你正在绘制的大量积分导致经济放缓.一个选项是缩减采样..也可以使用较低级别的功能进行绘制(检查 this related post以获得plot3 / scatter3 / line性能的比 ...
居然可以用jQuery实现360度汽车产品3D旋转展示酷炫特效使用你的小鼠标来试试吧
作者:极客小俊公众号:同名今天我们来看一个用jquery实现360度汽车产品3D旋转展示的效果,其实逻辑很简单, 就是让一堆图片转来转去就行了!
【前端领域】3D旋转超美相册（HTML+CSS）
世界上总有一半人不理解另一半人的快乐. --<爱玛> 目录一.前言二.本期作品介绍 3D旋转相册三.效果展示四.详细介绍五.编码实现 index.html style.css i ...
用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面
HTML:(下方有图) <link type="text/css" rel="stylesheet" href="__PUBLIC__/vend ...
几个炫酷的3D旋转动态效果（附代码）
之前,我们发布了极客编程挑战赛,竞赛题目是"制作炫酷的3D旋转动态显示效果",想知道更多信息,请前往以下地址进行了解:http://www.gbtags.com/gb/share/ ...

简单正方体的3d旋转

简单正方体的3d旋转

1.首先搭建正方体模型

2.使得搭建正方体模型转动

3.总结

简单正方体的3d旋转相关推荐

最新文章

热门文章