关键词：
css3简单动画实例，实现魔方的动画
1、涉及的css属性：
（1）父元素样式中：
transform-style: preserve-3d;/*规定子元素以3D显示*/
animation:mofang 10s linear infinite;/*定义的动画名、动画完成的总时间、曲线样式、永久执行（infinite）*/
（2）@keyframes 动画名：定义动画操作
可以使用from和to定义
也可以使用百分比定义，0%50%100%
2、注意点
（1）X、Y、Z轴的方向确定：先想一个平面，即是X轴和Y轴，再想你的视线距离这个平面的距离指向，即Z轴（远小近大）；可以伸出左手，大拇指是Y轴，食指是X轴，中指是Z轴（即中指是面向自己的）。
css3中的3D坐标系：
（2）rotate(旋转)时，坐标轴也会随着旋转，要区分是先移动再旋转，还是先旋转再移动，因为两者执行之后的结果显示是不一样的。
（3）transform多个属性值，执行顺序，是按照从左向右执行。
（4）在魔方中确定坐标轴：可以想象将一个木板垂直插入一个魔方的正中间，魔方的六个面分别是这个木板通过旋转、平移形成了不同的面。
3、实例
<style>
ul
list-style-type: none;
margin: 0;
padding: 0;
.box
width:300px;
height:300px;
margin: 150px auto;
position: relative;
font-size: 50px;
/*所有元素保留3D转换*/
transform-style: preserve-3d;
/*动画效果*/
animation: mofang 10s linear infinite;
.box > div
width:300px;
height:300px;
position: absolute;
li
float: left;/*让li浮动*/
width:90px;
height:90px;
margin: 5px;
line-height: 90px;
text-align: center;
border-radius: 20px;
/*每个div下的li背景*/
.before li
background-color:red;
.back li
background-color: #ba9304;
.top li
background-color: deeppink;
.bottom li
background-color: blueviolet;
.left li
background-color: greenyellow;
.right li
background-color: blue;
/*转换之后的效果，下面容易晕*/
.before
background-color: transparent;
transform: translateZ(150px);
.back
background-color: transparent;
transform:translateZ(-150px) rotateY(180deg);
.top
background-color: transparent;
transform:rotateX(90deg) translateZ(150px) rotateZ(180deg);
.bottom
background-color: transparent;
transform:rotateX(-90deg) translateZ(150px);
.left
background-color: transparent;
transform:rotateY(-90deg) translateZ(150px);
.right
background-color: transparent;
transform:rotateY(90deg) translateZ(150px);
@keyframes mofang
from
transform:rotateY(0deg) rotateX(0deg);
to
transform:rotateY(135deg) rotateX(45deg);
</style>
<div class="box">
<div class="before">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="back">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
注意：li要设置浮动显示，不然不会在一个面。
仅是一个简单实例，记录总结一下。复杂的动画自己再慢慢尝试。
canvas实现3d魔方
摘要：使用canvas实现可交互的3D魔方一、简单分析魔方物理性质：1.中心块（6个）：中心块与中心轴连接在一起，但可以顺着轴的方向自由的转动。2.棱块（12个）：棱块的表面是两个正方形，结构类似一个长方体从立方体的一个... 查看详情
directx11--实现一个3d魔方(代码片段)
原文:DirectX11--实现一个3D魔方(3)前言(2019/1/909:23)上一章我们主要讲述了魔方的旋转，这个旋转真是有毒啊，搞完这个部分搭键鼠操作不到半天应该就可以搭完了吧...(2019/1/921:25)啊，真香有人发这张图片问我写魔方的目的是不是这... 查看详情
css3中的3d动画实现(钟摆魔方)--实现代码
CSS3中的3D动画实现(钟摆、魔方)CSS3的2D变形----传统的transform变形效果transform ：translate、scale、rotate、skew…translate：平移、scale：缩放、rotate：旋转、skew：倾斜<!DOCTYPEhtml><htmllang="en"><head><metacharset= 查看详情
opengl实现3d魔方游戏源代码
【转】http://blog.csdn.net/hackbuteer1/article/details/6679557首先这个程序是建立的是Windows应用程序，建立控制台程序是不能运行的，另外，项目——项目属性——配置属性——常规-----使用多字节字符集，这样编译才能够... 查看详情
分享ht实用技巧：实现指南针和3d魔方导航(代码片段)
...方位。 一般有两种表现形式：指南针、小方盒(方位魔方)。 参考一下百度百科中的 maya 界面，可以看到右上角有一个标识方位的小盒子，说的就是它： Hightopo 的 HTforWeb 产品可以... 查看详情
分享ht实用技巧：实现指南针和3d魔方导航(代码片段)
...方位。 一般有两种表现形式：指南针、小方盒(方位魔方)。 参考一下百度百科中的maya界面，可以看到右上角有一个标识方位的小盒子，说的就是它： Hightopo的HTforWeb产品可以很方便地构造轻量化的3D... 查看详情
html+css+js实现❤️3d旋转魔方图片相册特效❤️(代码片段)
效果演示： 代码目录：主要代码实现：部分CSS样式：background:url(../img/s3.jpg);background-size:100%100%;opacity:0.8;transform:rotateY(90deg)translateZ(200px);.box.box1.leftbackground:url(../i 查看详情
css33d 魔方
<style><!--@charset"UTF-8";*{margin:0;padding:0}html,body{width:100%;height:100%;}.container{text-align:center;margin:50pxauto;width:200px;}.cube{transform-style:preserve-3d;-webk 查看详情
每天一个javascript小特效——会魔法的旋转魔方相册(代码片段)
...盒子模型，完成html代码编写设置样式，利用transform3D做出魔方JS构建事件1.HTML篇魔方中用<li>标签包含图片，方便用<ul>包裹，后面给ul添加3D模式便可进行翻折比较简单不过多讲解,代码如下：2.CSS篇2.1基础设置... 查看详情
魔方教学网站中的3d动画是怎么弄得。
http://www.mefferts.com.cn/tutorial/4x4x4/step1.htm这里的JAVA程序是怎么弄出来的。怎么才能把动画弄到网页中。<appletcode="RubikPlayer.class"codebase=3width="300"height="300"><paramname="scrptLanguage"value="SupersetENG&quo... 查看详情
光线投射和二维阵列在 Unity 中的魔方无法按预期工作
】光线投射和二维阵列在Unity中的魔方无法按预期工作【英文标题】：Raycastingand2darraysnotworkingasexpectedwithRubik\'sCubeinUnity【发布时间】：2021-06-1420:15:11【问题描述】：我希望这是一个很好的问题，但我目前正在Unity中研究魔方。我... 查看详情
魔方二维动态还原过程matlab仿真/魔方二维平面展开(代码片段)
关键词：魔方还原；魔方二维平面展开1.魔方基础知识1.1魔方各面表示根据魔方各面所处位置将三阶魔方六个面分别用六个大写英文字母进行表示，相应面上的颜色也分别用这六个大写英文字母进行表示。魔方六个面... 查看详情
软媒魔方绿色版|软媒魔方下载
软媒魔方支持64位和32位的所有主流Windows系统，从优化大师发展为一款系统增强套装，自动化、智能化解决各种电脑问题。软媒魔方内置20余款强大、绿色化的知名组件，清理、美化、桌面增强、系统雷达、通知区万年历、优化... 查看详情
读书笔记（第五周）之魔方的创新
读书笔记（第五周）读《构建之法》之魔方的创新在不苛求比喻精准的前提下，“魔方的创新”这篇小故事写得确实有意思，也很能反映创新过程中一系列的问题。首先，通过几个大致的故事节点来总结一下情节的发展，再来逐... 查看详情
魔方的征途-魔方如何选择？
...个"我们认为一定能复原"但实际"无法复原"的魔方，看着大神们"信手拈来"的复原过程，除了惊呼"这个不可能"外，好像没其他能做的了，有些凄凉。。。最近孩子学校用到了魔方道具，... 查看详情
p2007魔方
洛谷——P2007魔方题目背景常神牛从来没接触过魔方，所以他要借助计算机来玩。即使是这样，他还是很菜。题目描述常神牛家的魔方都是3*3*3的三阶魔方，大家都见过。（更正：34以图为准。）作为一名菜鸟，常神牛从网... 查看详情
解魔方算法/thislethwaite解魔方算法/降群法
0.前言主流的魔方解法，从入门的层先法，到进阶的CFOP、桥式乃至盲拧，都是从部分到整体的思路，逐块逐层还原魔方。但是Thislethwaite法不同，Thislethwaite法从整体出发，不断降低魔方的混乱程度，最... 查看详情
洛谷p2007魔方
P2007魔方题目背景常神牛从来没接触过魔方，所以他要借助计算机来玩。即使是这样，他还是很菜。题目描述常神牛家的魔方都是3*3*3的三阶魔方，大家都见过。（更正：34以图为准。）作为一名菜鸟，常神牛从网上搜了一篇... 查看详情