css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？

需要先了解的知识：

①了解CSS的2d下的transform变化下的平移(translate)和旋转(rotate)。

②了解CSS的3d下的transform变化下的平移和旋转。

③使用transform设置原点，旋转依赖原点。

④无论2d空间，还是3d空间，平移都不依赖原点。

⑤2d空间下，旋转依赖的是2d空间下的某一个点。3d空间下，旋转时依赖的是3d空间下的某一点，一般情况下，都可以认为3d空间下的旋转是依赖于X轴或者Y轴或者Z轴进行旋转。

分析：魔方由6个面构成，需要将六个面组成立方体。

每一个面由3*3个小盒子构成。

起始需要将六个面都绝对定位到同一个位置，通过3dCSS平移、旋转将六个面组成立方体。

设计出一个3*3个小盒子构成的平面：

设计出9个小盒子并使用float的形式将九个小盒子合理的布局到平面中。

方案一：(先平移后旋转) 立体魔方案例一

①设计6个平面使用绝对定位到屏幕的同一位置。

②为每一个平面设计9个盒子排布到合理的位置(可以使用float或者inline-bolck或者绝对定位)。

③通过先平移后旋转的方式将六个面组成立方体。

④为包裹六个平面的盒子设置一个动画，立方体魔方将会旋转展示。

方案二：(先旋转后平移) 立体魔方案例二

①设计6个平面使用绝对定位到屏幕的同一位置。

②为每一个平面设计9个盒子排布到合理的位置(可以使用float或者inline-bolck或者绝对定位)。

③通过先旋转后平移的方式将六个面组成立方体。

注意在三维立体中，平面旋转后，对应的三个轴线(X、Y、Z))将随之移动。

④为包裹六个平面的盒子设置一个动画，立方体魔方将会旋转展示。

方案三：(先定原点后旋转) 立体魔方案例三

①设计6个平面使用绝对定位到屏幕的同一位置。

②为每一个平面设计9个盒子排布到合理的位置(可以使用float或者inline-bolck或者绝对定位)。

③通过先设置原点后旋转的方式将六个面组成立方体。

④为包裹六个平面的盒子设置一个动画，立方体魔方将会旋转展示。

css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？相关推荐

[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
二阶魔方旋转魔方可以对它的6个面自由旋转。我们来操作一个2阶魔方（如图1所示）：
/* 二阶魔方旋转魔方可以对它的6个面自由旋转. 我们来操作一个2阶魔方(如图1所示): 为了描述方便,我们为它建立了坐标系. 各个面的初始状态如下: x轴正向:绿 x轴反向:蓝 y轴正向:红 y轴 ...
二阶魔方旋转魔方可以对它的6个面自由旋转。我们来操作一个2阶魔方（python版）：
def ROL(List,n,m):lidd = List[m-n:m]lidd.extend(List)lidd = lidd[0:m]return lidd class MOF():def __i ...
固定旋转_扶手也要用大理石！石材旋转楼梯扶手的设计与安装
楼梯踏步使用什么材料比较好? 木材.瓷砖以及大理石都是不错的选择大家可以根据自家的要求和经济条件进行选择天然大理石花色非常丰富在做了防护之后,光泽度就更加高端大气大理石本身不易变形硬度高,磨 ...
java 文字水印旋转_利用Thumbnailator轻松实现图片缩放、旋转与加水印
概述 Thumbnailator 是一个开源的 Java 项目,它提供了非常简单的 API 来对图片进行缩放.旋转以及加水印的处理. 有多简单呢?简单到一行代码就可以完成图片处理.形式如下: Thum ...
Unity3dRPG 相机跟随player旋转_运动相机支架设计的16种姿势，必能拍好小片！
短视频火热的当下, 身边的朋友都开始用视频app, 来记录生活中的点点滴滴, 甚至开始营销自己. 短视频除了软件操作并不繁琐, 而且还有很多简单易用的设备及配件. 今天苏苏要介绍的, 就是一款便携小巧 ...
用CSS3动画效果写出一个立体小水滴
小水滴非常简单,其实可以直接用一个div+before after就可以写出来,个人是用三个div写的,现在给大家看一下吧!!! 1.先建立一个div div里面包括两个div作为2个小泡泡 < ...
Windows Phone 7 立体旋转动画的实现
Storyboard.TargetProperty表示获取或设置应进行动画处理的属性的名称.通过对Storyboard.TargetProperty属性的设置可以很简单地实现X轴.Y轴.Z轴的立体旋转 ...
利用css的rotate()做一个3d旋转图集
视频效果: 3d旋转图集思路: 1.要完成这个作品我们一定要理解变形原点的概念,因为要将4张图片形成图中所示的效果,我们一定要改变变形在z轴上的位置,然后使用rotate()形成一个类似于旋转木马一 ...

css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？

css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？相关推荐

最新文章

热门文章