3D旋转立方体演示(html5)

最新推荐文章于 2024-07-06 13:17:42 发布
最新推荐文章于 2024-07-06 13:17:42 发布
阅读量673 收藏 1
点赞数
分类专栏： html 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guxinaiheqiao/article/details/39964479
版权 
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>3D旋转立方体演示</title>
<meta name="generator" content="WordPress 3.9.2" />
<style>
/*************** ANIMATIONS ***************/

@-webkit-keyframes spin {
 from {
-webkit-transform: rotateY(0);
}
to {
	-webkit-transform: rotateY(360deg);
}
}
 @-ms-keyframes spin {
 from {
ms-transform: rotateY(0);
}
to {
	ms-transform: rotateY(360deg);
}
}
 @keyframes spin {
 from {
transform: rotateY(0);
}
to {
	transform: rotateY(360deg);
}
}
 @-webkit-keyframes spin-vertical {
 from {
-webkit-transform: rotateX(0);
}
to {
	-webkit-transform: rotateX(-360deg);
}
}
 @-ms-keyframes spin-vertical {
 from {
ms-transform: rotateX(0);
}
to {
	ms-transform: rotateX(-360deg);
}
}
 @keyframes spin-vertical {
 from {
transform: rotateX(0);
}
to {
	transform: rotateX(-360deg);
}
}
/*************** STANDARD CUBE ***************/
.cube-wrap {
	-webkit-perspective: 800px;
	-webkit-perspective-origin: 50% 100px;
	-moz-perspective: 800px;
	-moz-perspective-origin: 50% 100px;
	-ms-perspective: 800px;
	-ms-perspective-origin: 50% 100px;
	perspective: 800px;
	perspective-origin: 50% 100px;
}
.cube {
	position: relative;
	width: 200px;
	margin: 0 auto;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: spin 5s infinite linear;
	-moz-transform-style: preserve-3d;
	-moz-animation: spin 5s infinite linear;
	-ms-transform-style: preserve-3d;
	-ms-animation: spin 5s infinite linear;
	transform-style: preserve-3d;
	animation: spin 5s infinite linear;
}
.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);
	font-size: 20px;
	text-align: center;
	line-height: 200px;
	color: rgba(0,0,0,0.5);
	font-family: sans-serif;
	text-transform: uppercase;
}
/*************** DEPTH CUBE ***************/
.depth div.back-pane {
	-webkit-transform: translateZ(-100px) rotateY(180deg);
	-moz-transform: translateZ(-100px) rotateY(180deg);
	-ms-transform: translateZ(-100px) rotateY(180deg);
	transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
	-webkit-transform: rotateY(-270deg) translateX(100px);
	-webkit-transform-origin: top right;
	-moz-transform: rotateY(-270deg) translateX(100px);
	-moz-transform-origin: top right;
	-ms-transform: rotateY(-270deg) translateX(100px);
	-ms-transform-origin: top right;
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.depth div.left-pane {
	-webkit-transform: rotateY(270deg) translateX(-100px);
	-webkit-transform-origin: center left;
	-moz-transform: rotateY(270deg) translateX(-100px);
	-moz-transform-origin: center left;
	-ms-transform: rotateY(270deg) translateX(-100px);
	-ms-transform-origin: center left;
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.depth div.top-pane {
	-webkit-transform: rotateX(-90deg) translateY(-100px);
	-webkit-transform-origin: top center;
	-moz-transform: rotateX(-90deg) translateY(-100px);
	-moz-transform-origin: top center;
	-ms-transform: rotateX(-90deg) translateY(-100px);
	-ms-transform-origin: top center;
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.depth div.bottom-pane {
	-webkit-transform: rotateX(90deg) translateY(100px);
	-webkit-transform-origin: bottom center;
	-moz-transform: rotateX(90deg) translateY(100px);
	-moz-transform-origin: bottom center;
	-ms-transform: rotateX(90deg) translateY(100px);
	-ms-transform-origin: bottom center;
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.depth div.front-pane {
	-webkit-transform: translateZ(100px);
	-moz-transform: translateZ(100px);
	-ms-transform: translateZ(100px);
	transform: translateZ(100px);
}
/*************** VERTICAL SPINNING CUBE ***************/
.cube-wrap.vertical .cube {
	-webkit-transform-origin: 0 100px;
	-moz-transform-origin: 0 100px;
	-ms-transform-origin: 0 100px;
	transform-origin: 0 100px;
	-webkit-animation: spin-vertical 5s infinite linear;
	-moz-animation: spin-vertical 5s infinite linear;
	-ms-animation: spin-vertical 5s infinite linear;
	animation: spin-vertical 5s infinite linear;
}
.cube-wrap.vertical .depth div.top-pane {
	-webkit-transform: rotateX(-270deg) translateY(-100px);
	-moz-transform: rotateX(-270deg) translateY(-100px);
	-ms-transform: rotateX(-270deg) translateY(-100px);
	transform: rotateX(-270deg) translateY(-100px);
}
.cube-wrap.vertical .depth div.back-pane {
	-webkit-transform: translateZ(-100px) rotateX(180deg);
	-moz-transform: translateZ(-100px) rotateX(180deg);
	-ms-transform: translateZ(-100px) rotateX(180deg);
	transform: translateZ(-100px) rotateX(180deg);
}
.cube-wrap.vertical .depth div.bottom-pane {
	-webkit-transform: rotateX(-90deg) translateY(100px);
	-moz-transform: rotateX(-90deg) translateY(100px);
	-ms-transform: rotateX(-90deg) translateY(100px);
	transform: rotateX(-90deg) translateY(100px);
}
/*************** FLAT SPINNING CUBE ***************/
.cube-wrap.flat {
	-webkit-perspective: none;
	-webkit-perspective-origin: 0 0;
	-moz-perspective: none;
	-moz-perspective-origin: 0 0;
	-ms-perspective: none;
	-ms-perspective-origin: 0 0;
	perspective: none;
	perspective-origin: 0 0;
}
</style>

</head>

          <div class="entry-content">
          <center>  <p>3D旋转立方体演示</p></center>
          <center>  <h2>横向旋转立方体</h2></center>
            <div style="height: 300px; margin-top: 40px;">
              <div class="cube-wrap lazy ">
                <div class="cube depth lazy ">
                  <div class="front-pane lazy ">前</div>
                  <div class="back-pane lazy ">后</div>
                  <div class="top-pane lazy ">上</div>
                  <div class="bottom-pane lazy ">下</div>
                  <div class="left-pane lazy ">左</div>
                  <div class="right-pane lazy ">右</div>
                </div>
              </div>
            </div>
         <center>   <h2>纵向旋转立方体</h2></center>
            <div style="height: 300px; margin-top: 60px;">
              <div class="cube-wrap vertical lazy ">
                <div class="cube depth lazy ">
                  <div class="front-pane lazy ">前</div>
                  <div class="back-pane lazy ">后</div>
                  <div class="top-pane lazy ">上</div>
                  <div class="bottom-pane lazy ">下</div>
                  <div class="left-pane lazy ">左</div>
                  <div class="right-pane lazy ">右</div>
                </div>
              </div>
            </div>
        <center>    <h2>水平旋转立方体</h2></center>
            <div style="height: 300px; margin-top: 60px;">
              <div class="cube-wrap flat lazy ">
                <div class="cube depth lazy ">
                  <div class="front-pane lazy ">前</div>
                  <div class="back-pane lazy ">后</div>
                  <div class="top-pane lazy ">上</div>
                  <div class="bottom-pane lazy ">下</div>
                  <div class="left-pane lazy ">左</div>
                  <div class="right-pane lazy ">右</div>
                </div>
              </div>
            </div>
          </div>

</body>
</html>

奈河桥
关注
专栏目录
CSS3 3d旋转图片立方体案例演示
alenworks的博客
03-04 862
CSS3选择器基础 选择器，在过去我们学过名选择器，类选择器，全局选择器，标签选择器这几种，现在在接触到CSS3以后我将再介绍CSS3属性选择器。 CSS3属性选择器，首先本质上它是选择器，用法和功能和原先的各种选择器并没有什么区别，而它特殊的地方在于它可以根据对象的不同属性来确定它将要选择的对象。在没有学习到这些属性选择器之前，我们对不同属性的对象的选择，一般都采用取不同的类名或者不同的ID命来...
html5 3D立方体动画 演示各个方向的翻转动画.rar
07-10
3D盒子模型动画，html5 3D立方体动画，演示了各个方向的翻转动画，点击下边各个方向按钮，盒子会在对应方向上翻转，鼠标移上盒子，动画效果即可播放。
HTML5 3D地图旋转
09-04
HTML5 3D地图旋转 。
用html做立方体，并旋转
2401_82944012的博客
07-06 2652
用html做立方体，并旋转前言分析开肝最终代码最后 前言 刚开始学HTML时以为只能做网页，可是， HTML彻底颠覆了我的认知。 分析 经我一波操作，搭出来一个正方体。 首先，要完成我们这个项目有三个重要的地方，分别是： 观察层：视角 3D体：开启HTML3d模式 3D面：旋转 从观察层开始，视角距离我们要用perspactive来实现近大远小。这是HTML坐标系 注意它的旋转方向。 3d层，3d打开方式。transform-style: preserve-3d;语句。 旋转，涉及到动画，等会儿再讲。 开
3D旋转立方体演示
shenzhenNBA的专栏
05-29 1449
CSS3越来越强大了，看看新的功能： 3D旋转立方体演示
HTML5 - 3D 旋转相册
09-14 967
前一段时间，突然看到一个炫酷的3D旋转相册，这里记录一下，先看效果图： HTML5 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 3D旋转图片相册 可鼠标悬停&lt...
html5写的超炫3D演示
liangneo的专栏
06-05 4348
期待html5让互联网生活变得更美好 演示地址：http://www.benjoffe.com/code/games/torus/
HTML5实现3D旋转球
04-08
利用HTML5实现的3D旋转球效果~~
3D立方体旋转导航菜单演示.rar
10-01
【3D立方体旋转导航菜单演示】是一种创新的网页交互设计，主要利用了JavaScript库jQuery以及CSS3技术来实现。这种菜单设计能够为用户带来独特的视觉体验，通过3D旋转效果，使网站的导航菜单更加生动有趣。在网页设计...
html页面中的简单旋转立方体
最新发布
07-19
在技术会议、演示或教育培训中，使用旋转的立方体可以作为说明CSS 3D转换和动画能力的示例。这有助于展示前端开发中的视觉效果和交互设计。 显示旋转的立方体不仅仅是一个视觉上的动画展示，它还在教育、技术演示和...
HTML5 3D立方体动画.zip
11-18
这个压缩包中的内容可能包含一个演示文件，展示了如何用这些技术构建一个旋转的3D立方体动画。 首先，让我们深入了解一下HTML5。HTML5是超文本标记语言的最新版本，它的核心目标是提高用户体验和简化开发者的工作。...
HTML5超炫3D旋转效果
09-11
html5的3D旋转效果
Html5+CSS3实现3D旋转效果
04-16
Html5+js+CSS3实现3D旋转效果
HTML5 3D图片旋转效果
12-06
HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果HTML5 3D图片旋转效果
html5 3D旋转立方体
07-19
使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。
HTML5 3D正方体旋转动画 很酷的3D特效
08-23
之前我们分享过很多非常不错的HTML5 3D立体动画特效，尤其是一些HTML5 Canvas动画，更是酷得让人惊叹。今天我们又要来分享一款好玩的HTML5 3D效果，该特效是一个可以旋转播放的正方体，你可以从多个视角来查看正方体，非常不错的3D效果。
H5 实现一个正方体旋转
jiagezuishuai的博客
09-01 4004
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> ul{ position: relative; width: 200px; height: 200px; tran
多视角3D可旋转的HTML5 Logo动画
大前端
08-13 554
这是一款基于HTML5和CSS3的3D动画特效，与之前的3D特效不同的是，这款是完全用HTML5特性实现的，而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转，从而可以从多个视角来观察HTML5 Logo。 HTML代码 <div class="link-overlay"> </div> <canvas id="canvas" style="bac...
HTML+CSS 3d旋转正方体
xsijisw21的博客
05-10 267
HTML+CSS 3d旋转正方体
HTML5+CSS3打造3D立方体旋转教程：深度解析与实战指南
本篇文章是一份详细的HTML5和CSS3实现3D立方体旋转效果的教程，旨在帮助开发者理解和掌握如何在网页设计中运用这两种技术创建出动态和引人注目的视觉效果。教程重点讲解了以下几个关键知识点： 1. **3D变换基础**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值