3D动画立方体

• 下载 3D 立方体 - 993 B

引言

层叠样式表 (CSS3) 是网页设计师和开发者与 HTML 和 XHTML 等标记语言一起使用的工具，用于构建网站。CSS3 为网络浏览器提供控制网页视觉效果所需的信息，例如 HTML 元素的位置、文本样式、背景、颜色和图像等等。高级 CSS3 技术使网站作者能够为移动网络浏览器定制布局和设计，并获得为常规桌面浏览器创建网站所需的技能。我将向您介绍编写 CSS3 以实现 3D 立方体动画的基础知识，无需任何脚本行。

CSS3 提供了两种执行动画的方法：过渡和动画。它们在工作方式上相似，但服务于两个不同的目的。过渡让我们声明希望某个属性从一个值逐渐更改为另一个值。动画让我们更具体地定义关键帧以实现复杂的动画。

在这个项目中，我使用了 HTML 和 CSS3。我将解释它们。

HTML 代码

我们有六个名为 1 到 6 的图像 .png，它们代表立方体的面。有一个公共类标识符称为“face”，它确定每个面的属性。有六个分隔的 ID “F1”、“F2”…“F6”，它们以某种方式排列，并分别以特定角度旋转，以看起来像一个立方体。所有这些对象都位于一个 ID 为“cube”的 div 内部，该 div 又位于另一个 ID 为“container”的 div 内部。

CSS3 代码

场景从 body 开始，背景颜色为蓝色。face 类的定位是绝对的，以便看起来像堆叠在一起，并占用 360 像素的宽度和高度，这里我给它 40 像素的填充，以便可以看到立方体内部。@-webkit-keyframes rotate 技术用于将对象从给定角度动画到另一个角度，在这个项目中，我从 (0 度) 开始，在 50% 时给出 (360 度)，然后返回到 (0 度) 以向右和向左旋转。id cube 被赋予自动边距，并占用 400 像素的宽度和高度，我使用了以下 webkit

• webkit-transform-style: Preserve-3D 以启用 3D 样式
• webkit-animation-name: Rotate 动画类型为旋转
• webkit-animation-duration: 20s 动画持续时间（秒）
• webkit-animation-timing-function: Ease-in-out 动画计时函数使立方体开始更快，然后逐渐减慢
• webkit-animation-iteration-count: Infinite 无限循环围绕 Y 轴 360 度向右和向左无限循环的迭代属性使立方体旋转

ID “container” 包含立方体的所有内容，并且应该具有透视，在这种情况下，透视是 800 像素。透视原点属性定义了 3D 元素在 x 轴和 y 轴上的基准位置。此属性允许您更改 3D 元素的底部位置。

为了在 X 轴和 Y 轴周围排列立方体的面并进行平移，我使用了以下属性

#F1 {
-webkit-transform:rotateX(90deg)translatez(200px); 
} 
#F2 {
-webkit-transform:translatez(200px); 
}
#F3 {
-webkit-transform:rotateY(90deg)translatez(200px); 
}
#F4 {
-webkit-transform:rotateY(180deg)translatez(200px); 
}
#F5 {
-webkit-transform:rotateY(-90deg)translatez(200px); 
}
#F6 {
-webkit-transform:rotateX(- 
90deg)translatez(200px)rotate(180deg); 
} 

令人兴奋的创新，例如 CSS 中的动画，将鼓励才华横溢的设计师突破网络浏览器能力的界限，而且，作为 CSS 作者，你和我将是构建美丽而引人入胜的网站的人，这些网站的潜在受众大于任何其他形式的艺术。CSS3 的未来一片光明。