CSS动画实例：3D立方体
CSS3支持3D转换，与3D转换有关的属性有：
transform：向元素应用 2D或3D 转换。
transform-origin：改变被转换元素的位置。
transform-style：规定被嵌套元素如何在3D空间中显示。
perspective：规定 3D 元素的透视效果。
perspective-origin：规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
在transform属性设置中，可使用的3D转换函数主要有：
matrix3d(n,n, n,n,n,n ,n,n,n ,n,n,n, n,n,n,n )：定义3D转换，使用16个值的 4x4 矩阵。
translate3d(x,y,z)：定义3D平移动转换。
translateX(x)：定义3D沿X轴平移转换。
translateY(y) ：定义3D沿Y轴平移转换。
translateZ(z) ：定义3D沿Z轴平移转换。
scale3d(x,y,z) ：定义 3D 缩放转换。
rotate3d(x,y,z,angle)：定义 3D 旋转。
rotateX(angle)：定义沿 X 轴的 3D 旋转。
rotateY(angle) ：定义沿 Y 轴的 3D 旋转。
rotateZ(angle) ：定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
学习和利用3D转换，可以绘制立体化的图形。
1．一个简单的立方体
一个立方体有前、后、左、右、上、下共六个面，可在页面中定义立方体如下：
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
为立方体cube及六个面定义样式规则，每个面进行适当的平移和旋转，可以绘制出一个3D立方体。编写的HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>一个简单的3D立方体</title>
<style>
.container
{
margin: 0 auto;
width: 400px;
height:400px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.cube
{
position: relative;
width: 200px;
top:80px;
left:80px;
transform-style:preserve-3d;
perspective: 800px;
perspective-origin: -50% -100px;
}
.cube div
{
position: absolute;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
text-align: center;
line-height: 200px;
font-weight:bold;
text-shadow:-1px 1px 5px #f60;
color:#fff;
font-family: sans-serif;
text-transform: uppercase;
font-size:30px;
}
.front
{
transform: translateZ(100px);
}
.back
{
transform: translateZ(-100px) rotateY(180deg);
}
.left
{
transform:rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.right
{
transform:rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.top
{
transform:rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom
{
transform:rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以显示如图1所示的立方体。
图1 一个简单的3D立方体
去掉图1中立方体各面上的文字，分别以红色、橙色、黄色、绿色、青色和蓝色表示六个面，并且定义关键帧，使得立方体旋转起来。编写的HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>旋转的3D立方体</title>
<style>
.container
{
margin: 0 auto;
width: 400px;
height:400px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.cube
{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
animation: anim 8s linear infinite;
}
.cube div
{
width: 100%;
height: 100%;
position: absolute;
}
.front
{
background: rgba(255, 0, 0, 0.3);
transform: translateZ(100px);
}
.back
{
background: rgba(255, 0, 255, 0.3);
transform: translateZ(-100px);
}
.left
{
background-color: rgba(255, 255, 0, 0.3);
transform-origin: left;
transform: rotateY(90deg) translateX(-100px);
}
.right
{
background: rgba(0, 255, 0, 0.3);
transform-origin: right;
transform: rotateY(90deg) translateX(100px);
}
.top
{
background: rgba(255, 0, 255, 0.3);
transform: rotateX(90deg) translateZ(100px);
}
.bottom
{
background: rgba(0, 0, 255, 0.3);
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes anim
{
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图2所示的动画效果。
图2 旋转的立方体
2．3D魔方
在立方体的每个面上用线性渐变（Linear Gradients）给背景加上3*3的方格图形，构成一个3D魔方。
一个对象背景用线性渐变填充的调用格式为：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
设页面中有<div class="box"></div>，若为.box定义样式规则如下：
.box
{
position: relative;
height:200px;
width: 200px;
background: linear-gradient(to right, red , blue);
}
可在页面中显示如图3所示的图形。
图3 红蓝色线性渐变
若修改background属性的设置为:
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
可在页面中显示如图4所示的图形。
图4 七彩渐变图
若定义.box定义样式规则如下：
.box
{
position: relative;
height:200px;
width: 200px;
background: repeating-linear-gradient(to right,
#BC8F8F 0, #BC8F8F 2px,
#FF1493 2px, #FF1493 66px,
#BC8F8F 66px );
}
.box:before
{
content: "";
position: absolute;
width: 200px;
height: 200px;
transform: rotate(90deg);
background: repeating-linear-gradient(to right,
#BC8F8F 0,#BC8F8F 2px,
transparent 2px, transparent 66px,
#BC8F8F 66px );
}
可在页面中显示如图5所示的图形。
图5 3*3方格图
将图5所示的方格绘制到立方体的六个面上，形成一个魔方。定义关键帧，使得魔方旋转起来。
编写的HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>3D魔方</title>
<style>
.container
{
margin: 0 auto;
width: 400px;
height:400px;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.cube
{
position: relative;
margin: 100px auto;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotateCube 8s linear infinite;
}
@keyframes rotateCube
{
0% { transform: rotateX(0) rotateY(0); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
.side
{
position: absolute;
width: 200px;
height: 200px;
}
.side:before
{
content: "";
position: absolute;
width: 200px;
height: 200px;
transform: rotate(90deg);
background: repeating-linear-gradient(to right,
#BC8F8F 0,#BC8F8F 2px,
transparent 2px, transparent 66px,
#BC8F8F 66px );
}
.front
{
transform: translateZ(100px);
background: repeating-linear-gradient(to right,
#BC8F8F 0, #BC8F8F 2px,
#8B008B 2px, #8B008B 66px,
#BC8F8F 66px );
}
.back
{
transform: translateZ(-100px);
background: repeating-linear-gradient(to right,
#BC8F8F 0, #BC8F8F 2px,
#6495ED 2px, #6495ED 66px,
#BC8F8F 66px );
}
.left
{
transform: translateX(-100px) rotateY(90deg);
background: repeating-linear-gradient(to right,
#BC8F8F 0, #BC8F8F 2px,
#FFD700 2px, #FFD700 66px,
#BC8F8F 66px );
}
.right
{
transform: translateX(100px) rotateY(90deg);
background: repeating-linear-gradient(to right,
#BC8F8F 0, #BC8F8F 2px,
#FF1493 2px, #FF1493 66px,
#BC8F8F 66px );
}
.top
{
transform: translateY(-100px) rotateX(90deg);
background: repeating-linear-gradient(to right,
#BC8F8F 0, #BC8F8F 2px,
#00FF7F 2px, #00FF7F 66px,
#BC8F8F 66px);
}
.bottom
{
transform: translateY(100px) rotateX(90deg);
background: repeating-linear-gradient(to right,
#BC8F8F 0, #BC8F8F 2px,
#FFFAFA 2px, #FFFAFA 66px,
#BC8F8F 66px);
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图6所示的动画效果。
图6 旋转的魔方
3．3D小木箱
有了从简单立方体到3D魔方的制作经验，下面我们再来制作一个3D木箱。主要是制作出形象的木箱面板。
设页面中有<div class='side'></div>，为.side定义样式规则如下：
.side
{
width: 160px;
height: 160px;
position: relative;
margin: 100px auto;
padding: 16px;
background-color: #d07f2c;
outline: 1px solid #a66523;
box-sizing: border-box;
}
.side:before, .side:after
{
content: '';
display: block;
width: 16px;
height: 100%;
position: absolute;
outline: 1px solid #a66523;
top: 0;
}
.side:before
{
left: 0;
}
.side:after
{
right: 0;
}
可在页面中显示如图7所示的图形。
图7 面板（1）
若修改.side的样式规则为：
.side
{
display: block;
width: 160px;
height: 160px;
overflow: hidden;
position: relative;
border: 1px solid #a66523;
box-sizing: border-box;
}
.side:before, .side:after
{
content: '';
display: block;
width: 150%;
height: 20%;
top: 50%;
left: 50%;
transform-origin: 0% 0%;
position: absolute;
outline: 1px solid #a66523;
background-color: #c87a2a;
}
.side:before
{
transform: rotate(45deg) translate(-50%, -50%);
}
.side:after
{
transform: rotate(-45deg) translate(-50%, -50%);
}
可在页面中显示如图8所示的图形。
图8 面板（2）
把图8的图形放入图7中，二者组合起来可以得到如图9所示的面板。
图9 木箱面板
制作好了面板，我们就可以制作出3D木箱，并让它旋转起来。编写的HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>旋转的3D小木箱</title>
<style>
.container
{
margin: 0 auto;
width: 400px;
height: 400px;
border: 4px solid rgba(255, 0, 0, 0.9);
background:#d8d8d8;
border-radius: 10%;
}
.crate
{
width: 160px;
height: 160px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
animation: crate-spin 10s linear infinite;
}
.side
{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
padding: 16px;
background-color: #d07f2c;
outline: 1px solid #a66523;
box-sizing: border-box;
}
.side:before, .side:after
{
content: '';
display: block;
width: 16px;
height: 100%;
position: absolute;
outline: 1px solid #a66523;
top: 0;
}
.side:before
{
left: 0;
}
.side:after
{
right: 0;
}
.side-inner
{
display: block;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
border: 1px solid #a66523;
box-sizing: border-box;
}
.side-inner:before, .side-inner:after
{
content: '';
display: block;
width: 150%;
height: 20%;
top: 50%;
left: 50%;
transform-origin: 0% 0%;
position: absolute;
outline: 1px solid #a66523;
background-color: #c87a2a;
}
.side-inner:before
{
transform: rotate(45deg) translate(-50%, -50%);
}
.side-inner:after
{
transform: rotate(-45deg) translate(-50%, -50%);
}
.crate .side .side-inner span
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 80px;
font-family: "Cooper Black", serif;
color: #f6f632;
}
.top
{
transform: translateY(-80px) rotateX(90deg);
}
.bottom
{
transform: translateY(80px) rotateX(90deg);
}
.left
{
transform: translateX(-80px) rotateY(-90deg);
}
.right
{
transform: translateX(80px) rotateY(90deg);
}
.front
{
transform: translateZ(80px);
}
.back
{
transform: translateZ(-80px) rotateY(180deg);
}
@keyframes crate-spin
{
from { transform: rotateX(-20deg) rotateY(0deg); }
to { transform: rotateX(-20deg) rotateY(-360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class='crate'>
<div class='side top'>
<div class='side-inner'></div>
</div>
<div class='side bottom'>
<div class='side-inner'></div>
</div>
<div class='side left'>
<div class='side-inner'>
<span>A</span>
</div>
</div>
<div class='side right'>
<div class='side-inner'>
<span>C</span>
</div>
</div>
<div class='side front'>
<div class='side-inner'>
<span>B</span>
</div>
</div>
<div class='side back'>
<div class='side-inner'>
<span>D</span>
</div>
</div>
</div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图10所示的动画效果。
图10 旋转的小木箱
CSS动画实例：3D立方体的更多相关文章
- CSS动画实例
上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b. a有左右边框(高度 ...
- CSS动画实例：太极图在旋转
利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1．旋转的太极图 设页面中有<div ...
- CSS动画实例：移动的眼珠子
适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...
- CSS动画实例：小圆球的海洋
CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...
- CSS动画实例：旋转的圆角正方形
在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...
- CSS动画实例：一颗躁动的心
在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"& ...
- CSS动画实例：跳跃的字符
1．翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> ...
- CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
- CSS动画实例：升空的气球
1．制作一个气球 设页面中有<div class="balloon"></div>,为. balloon设置样式规则如下: .balloon { heigh ...
随机推荐
- 学习vue.js (一)
MVVM模式 MVVM是Model-View-ViewModel的简写,即模型-视图-视图模型.当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之也一样,View和ViewM ...
- P1429 平面最近点对[加强版] 随机化
LINK:平面最近点对 加强版 有一种分治的做法 因为按照x排序分治再按y排序 可以证明每次一个只会和周边的六个点进行更新. 好像不算很难 这里给出一种随机化的做法. 前置知识是旋转坐标系 即以某个点 ...
- CF EC 87 div2 1354 C2 Not So Simple Polygon Embedding 计算几何 结论
LINK:Not So Simple Polygon Embedding 搞了好久终于搞会了. 错误原因 没找到合适算边长的方法 要么就是边长算的时候算错了. 几何学的太差了 最后虽然把十边形的和六边 ...
- 牛客练习赛60 D 斩杀线计算大师
LINK:斩杀线计算大师 给出a,b,c三个值 求出 ax+by+cz=k的x,y,z的正整数解 保证一定有解. 考虑两个数的时候 ax+by=k 扩展欧几里得可以解决. 三个数的时候 一个暴力的想法 ...
- php+mysql+apache实现登录注册系统
Php+mysql写网页注册登录系统 1.搭建msyql+php+apache的网站环境 (1) 在云服务器上搭建服务器,推荐使用宝塔集成 (2) 在本地windows搭建,推荐自己采用分开安装,这样 ...
- .NET三层架构各项目之间的引用关系及如何添加引用？
1.1三层之间的引用 整个.NET框架的项目创建完成之后,在开发之前,还需要建立各个项目之间的引用关系,以便在编写C#业务逻辑代码时调用相关项目的类库. 1.1.1 引用关系规则 .NET三层架构中的 ...
- .Net Core下基于Emit的打造AOP
之前的基于DispatchProxy的AOP组件,实现了属性注入,但是这个依旧有很多限制 比如不支持构造器注入,继承DispatchProxy的子类必须是公开类 个人有点代码洁癖,不喜欢这种不能控制的 ...
- 职场老鸟，一文教你如何正确入门Python爬虫！
爬虫现在的火热程度我就不说了,先说一下这门技术能干什么事儿,主要为以下三方面: 1.爬取数据,进行市场调研和商业分析 爬取知乎.豆瓣等网站的优质话题内容:抓取房产网站买卖信息,分析房价变化趋势.做不同 ...
- 100行Python代码实现一款高精度免费OCR工具
近期Github开源了一款基于Python开发.名为 Textshot 的截图工具,刚开源不到半个月已经500+Star. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语 ...
- WebApi的创建，部署，Oauth身份认证（一）
1.首先创建一个项目 2.选择Web API 3.创建一个空的控制器 4.控制器名称为MyApiController using System; using System.Collections.Ge ...