CSS3D魔法——旋转魔方

3D旋转：rotate3d(x,y,z,deg)
透视：perspective
3D呈现：transfrom-style

三维坐标系：

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

X轴：水平向右（注意：X往右边是正值，往左边是负值）

Y轴：垂直向下（注意：Y往下面是正值，往上面是负值）

Z轴：垂直屏幕（注意：往外面是正值，往里面是负值）

我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。

[](()二、魔方图片

=====================================================================

大家一起用自己喜欢的idol图片做一个酷炫的魔方吧！！！

先来看看静止状态下的效果图，别急，更好看的在下面！！！

效果图（示例）：

[](()三、代码

===================================================================

css代码如下（示例）：

body {

/* 透视写在被观察元素的父盒子上面的 */

perspective: 3000px;

}

section {

position: relative;

width: 600px;

height: 600px;

margin: 500px auto;

/* 代码写给父级，子元素开启立体空间 */

transform-style: preserve-3d;

transition: all 2s;

animation: rotate 10s linear forwards;

}

/* 给每个div设置大小、背景图片和位置 */

section div:nth-child(1) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/1.jpg);

transform: translateZ(300px);

}

section div:nth-child(2) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/2.jpg);

transform: translateX(300px) rotateY(90deg);

}

section div:nth-child(3) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/3.jpg);

transform: translateZ(-300px) rotateY(180deg);

}

section div:nth-child(4) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/4.jpg);

transform: translateX(-300px) rotateY(270deg);

}

section div:nth-child(5) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/5.jpg);

transform: translateY(-300px) rotateX(90deg);

}

section div:nth-child(6) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/6.jpg);

transform: translateY(300px) rotateX(-90deg);

}

/* 制作旋转动画 */

@keyframes rotate {

0% {}

CSS3D魔法——旋转魔方相关推荐

用css编写一个简单的旋转魔方
其实这个就是对CSS3 transform 属性animation属性的一个简单的应用,在网页平面中创建6个面(div),让这6个面匀速的不停的旋转,要创造出来一个3d的感觉,在一个2维的网页平面上, ...
java编程之数字魔方（N阶数字魔方和数字旋转魔方）
N阶数字魔方原理: 定义一个奇数阶二维数组,把每个元素顺序填入不同的自然数,要求行列和对角线元素相加的结果相等. 效果图: 实现代码: import java.util.*; public clas ...
MATLAB画三维动态魔方/旋转魔方/旋转立方体
以下是我的思路先了解几个重要的函数 patch()函数原理:点按顺序连成封闭多边形. 使用: point_sequence=[1,2,3,4]; %点连接的顺序 square_xyz=[3,1,3 ...
css3魔方3乘3每层旋转_学习做旋转魔方 (css3)
学习做旋转魔方 (css3) 看到一个帖子做了一个旋转魔方, 想着试着学习练练手. 看着高手的代码按照自己的思路, 码了一下, 记下遇到的一些问题. html 代码片段 3D 魔方 Rubik's C ...
CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
CSS 3D炫酷的旋转魔方
最近在复习HTML 和 CSS,把以前做的一些小例子拿出来分享一下,也加深自己的印象 css 是通过 transform 来实现3D旋转的,看代码之前,先复习一下相关知识 transform-orig ...
三郎前端特效学习源代码：魔法旋转粒子动态渐变特效
三郎前端特效学习源代码:魔法旋转粒子动态渐变特效简单介绍效果图源代码 html部分 js部分第二个js部分简单介绍类似电影里的魔法效果轨迹次数速度都可以自己改改效果图源代码 html ...
二阶魔方旋转魔方可以对它的6个面自由旋转。我们来操作一个2阶魔方（如图1所示）：
/* 二阶魔方旋转魔方可以对它的6个面自由旋转. 我们来操作一个2阶魔方(如图1所示): 为了描述方便,我们为它建立了坐标系. 各个面的初始状态如下: x轴正向:绿 x轴反向:蓝 y轴正向:红 y轴 ...
用CSS3写一个旋转魔方相册
这个旋转的魔方相册,是使用transform的translate属性写出来.一共是一大一小两个正方形,废话不多说,看代码 HTML代码 <!--最简单的代码呈现最炫丽的页面,请忽略我的类名,懒得 ...

CSS3D魔法——旋转魔方

CSS3D魔法——旋转魔方相关推荐

最新文章

热门文章