HTML5+CSS3实例：3D立方体旋转_css3实现3d旋转资源-CSDN文库

共8个文件

html：3个

css：2个

jpg：1个

HTML5+CSS3

3D立方体

1星需积分: 44 70 浏览量 2015-07-31 17:43:49 上传评论收藏 172KB RAR 举报

HTML5和CSS3是现代网页开发的两大核心技术，它们为网页设计带来了前所未有的可能性和交互体验。本实例聚焦于HTML5+CSS3实现的3D立方体旋转效果，这是一个能够吸引用户注意力，提升网站视觉吸引力的炫酷特效。 HTML5是超文本标记语言的第五版，它扩展了原有的HTML4.01，引入了新的元素，如<section>、<article>、<header>、<footer>等，使得网页结构更加清晰，更易于理解和维护。同时，HTML5支持离线存储、拖放功能、媒体元素等，极大地提升了网页的交互性和多媒体支持。 CSS3（层叠样式表第三版）则进一步增强了网页的样式表现能力。特别是其3D转换模块，允许开发者创建出具有立体感的视觉效果，如3D旋转、平移、缩放等。在本实例中，CSS3的transform属性被用于实现3D立方体的旋转效果，通过设置rotateX、rotateY和rotateZ来控制立方体的各个轴向转动。实现3D立方体旋转需要用到的关键CSS3属性有： 1. `perspective`：定义观察者与3D空间的距离，影响3D变换的透视效果。 2. `transform-style: preserve-3d;`：确保子元素保持其3D空间位置，而不是扁平化。 3. `transform-origin`：设定元素旋转的中心点。 4. `transition`：定义元素从一种样式过渡到另一种样式的速度，使得旋转过程平滑流畅。在HTML中，通常会创建一个包含六个面的div结构，每个面代表立方体的一个侧面，并分别应用不同的背景颜色。然后通过JavaScript或CSS动画来控制这些面的旋转角度，从而实现立方体的动态旋转。此外，为了在不同浏览器间保持兼容性，可能需要引入前缀 `-webkit-`、`-moz-`、`-ms-` 和 `-o-` 来支持Chrome、Firefox、IE和Opera等浏览器。例如，`-webkit-transform` 对应于Chrome和Safari，`-moz-transform` 用于Firefox，`-ms-transform` 适用于IE9及以上版本，`-o-transform` 是Opera的语法。本实例的3D立方体旋转动画，不仅展示了HTML5和CSS3的强大力量，也提供了丰富的学习资源，帮助开发者掌握现代网页设计的前沿技术。通过深入研究和实践这个例子，可以提升对3D效果的理解，为创建更具吸引力和交互性的网页打下坚实基础。

资源推荐

资源详情

资源评论

收起资源包目录

4 .rar （8个子文件）

HTML5+CSS3实例：3D立方体旋转动画

08_cube

zhy

index-1.html 3KB

css

reset.css 546B

1.jpg 168KB

background.html 2KB

index.html 5KB

css

style.css.bak 3KB

style.css 4KB

cube.htm 499B

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <link href="css/reset.css" rel="stylesheet" type="text/css"> <style type="text/css"> html { background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%); background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%); height: 100%; } .stage { -webkit-perspective: 1000px; width: 20em; height: 20em; left: 50%; top: 50%; margin-left: -10em; margin-top: -10em; position: absolute; /*border: 1px solid red;*/ } .cube { -webkit-animation: 6s spin linear infinite; position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(-20deg) rotateY(-20deg); } .cube * { /*background: url("css/1.jpg") no-repeat 0 0;*/ /*background-size: 100% 100%;*/ /*background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);*/ /*background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);*/ background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px); -webkit-background-size: 2.5em 2.5em; /*background-repeat: no-repeat;*/ background-color: rgba(0, 0, 0, 0.5); position: absolute; width: 100%; height: 100%; border: 2px solid rgba(54, 226, 248, 0.5); -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4); } .cube *:before { display: block; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%); content: ''; height: 100%; width: 100%; position: absolute; } /*cube * {*/ /*background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);*/ /*background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);*/ /*-webkit-background-size: 2.5em 2.5em, 2.5em 2.5em;*/ /*background-size: 2.5em 2.5em, 2.5em 2.5em;*/ /*border: 2px solid rgba(54, 226, 248, 0.5);*/ /*-webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);*/ /*box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);*/ /*}*/ .font { -webkit-transform: translateZ(10em); } .back { -webkit-transform: rotateX(180deg) translateZ(10em); } .left { -webkit-transform: rotateY(-90deg) translateZ(10em); } .right { -webkit-transform: rotateY(90deg) translateZ(10em); } .top { -webkit-transform: rotateX(90deg) translateZ(10em); } .bottom { -webkit-transform: rotateX(-90deg) translateZ(10em); } @-webkit-keyframes spin { from { -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); transform: translateZ(-10em) rotateX(0) rotateY(0deg); } to { -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <div class="stage"> <div class="cube"> <div class="font"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </div> </div> </body> </html>

评论收藏

内容反馈