用Css3实现旋转的立方体

通过Css3，我们能够创建动画，这可以在许多网页中取代一些JavaScript中复杂的动画效果的写法，下面让我们用css3实现一个旋转的立方体吧。

Html部分：
1）先给六个面写一个公共的类：cube-face，再给六个面分别给六个不同的类名：
< div class=“cube”>
< div class=“cube-face cube-face-front”>< /div>
< div class=“cube-face cube-face-left”>< /div>
< div class=“cube-face cube-face-back”>< /div>
< div class=“cube-face cube-face-right”>< /div>
< div class=“cube-face cube-face-top”>< /div>
< div class=“cube-face cube-face-bottom”>< /div>
< /div>

2）给body一个背景颜色，perspective可以使动画更有立体感：
body{
background: #222020;
perspective: 600px;/元素距视图的距离/
}
3）给cube宽高，相对定位和动画效果：
.cube{
width: 150px;
height: 150px;
position: relative;
top: 100px;
left: 45%;
transform-style: preserve-3d; /在3D空间中呈现被嵌套的元素，必须与transform属性一同使用/
animation: rotationMainContainer 5s linear infinite;/动画的名称，执行时间，匀速运动，无限次数/
创建动画，定义动画的名称，时长的百分比
@keyframes rotationMainContainer{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);/* 元素围绕其X Y Z轴旋转的度数*/
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

4）给公共样式cube-face宽高，绝对定位：
.cube-face{
width: 150px;
height: 150px;
position:absolute;
/background: #0b63be;/
opacity: .5;/透明度/
}
5）六个面的样式：
前面的面代码：
.cube-face-front{
transform: translatez(75px);/ z轴方向进行偏移75个像素/
animation: bgCAFace 5s linear infinite;
}
@keyframes bgCAFace{
0% {background: #1242B1;}
25% {background: #1925AF;}
50% {background: #1360C8;}
100%{background: #0A3CA0;}
}
一个面效果图：

后面的面代码：
.cube-face-back{
transform: translateZ(-75px);
animation: bgCABack 5s linear infinite;
}
@keyframes bgCABack{
0% {background: #1360C8;}
25% {background: #1242B1;}
50% {background: #1925AF;}
100%{background: #0A3CA0;}
}
两个面效果图：

左边的图代码：
.cube-face-left{
transform:rotateY(90deg) translateZ(75px);/y坐标旋转90度，z轴方向进行偏移75个像素/
animation: bgCALeft 5s linear infinite;
}
@keyframes bgCALeft{
0% {background: #1242B1;}
25% {background: #0A3CA0;}
50% {background: #1925AF;}
100%{background: #1360C8;}
}
三个面效果图：

右边的图代码：
.cube-face-right{
transform: rotateY(90deg) translateZ(-75px);
animation: bgCARight 5s linear infinite;
}
@keyframes bgCARight{
0% {background: #0A3CA0;}
25% {background: #1242B1;}
50% {background: #1360C8;}
100%{background: #1925AF;}
}
四个面效果图：

上边的图代码：
.cube-face-top{
transform: rotateX(90deg) translateZ(-75px);
animation: bgCATop 5s linear infinite;
}
@keyframes bgCATop{
0% {background: #1360C8;}
25% {background: #0A3CA0;}
50% {background: #1925AF;}
100%{background: #1242B1;}
}
五个面效果图：

下边的图代码：
.cube-face-bottom{
transform: rotateX(-90deg) translateZ(-75px);
animation: bgCABottom 5s linear infinite;
}
@keyframes bgCABottom{
0% {background: #1242B1;}
25% {background: #1360C8;}
50% {background: #1925AF;}
100%{background: #0A3CA0;}
}
完成图：

用Css3实现旋转的立方体相关推荐

CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...
【HTML】css3实现旋转的立方体相册
立体相册源码使用时请保存为*.html格式 <!DOCTYPE HTML> <html lang="en"> <head><meta c ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便,流畅,如何制作一个最简单的会旋转的立方体呢?话不多说,直接上代码! html代码如下,需要一个大的div包裹六个div作为立方体的六个表面 < ...
CSS3 3D旋转立方
##一.3D中的透视 1.透视是我们观察事物的方式在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的 ...
OpenGL设置透视投影并渲染旋转的立方体
OpenGL设置透视投影并渲染旋转的立方体先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <GLXW/glxw.h> #includ ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...

用Css3实现旋转的立方体

用Css3实现旋转的立方体相关推荐

最新文章

热门文章