<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

html,body{height: 100%;}

body{

position: relative;

perspective: 1000px;

/*设置透视点*/

}

.big{

width: 200px;

height: 200px;

transform-style: preserve-3d;

/*开启3D效果*/

position: absolute;

top: 40%;

left: 40%;

margin-left: -100px;

margin-top: -100px;

transform: rotatex(-60deg) rotateY(45deg) rotateZ(0deg) ;

/*设置变化前初始状态*/

transition: all 100s   linear;

/*设置持续时间以便能观察效果*/

}

.big:hover{

transform: rotatex(10000deg) rotateY(10000deg)   rotateZ(1000deg);

/*设置最后状态*/

}

.big div{

width: 200px;

height: 200px;

text-align: center;

line-height: 200px;

font-size: 40px;

position: absolute;

top: 0; left: 0;

background: url(img/mofang.png);

}

.big div:nth-child(1){

background-color: red;

transform:

rotateY(90deg)

translateZ(100px);

/*让div旋转和位移,构成正方体*/

}

.big div:nth-child(2){

background-color: yellow;

transform: rotateY(90deg) translateZ(-100px);

}

.big div:nth-child(3){

background-color: aqua;

transform: rotateX(90deg) translateZ(100px);

}

.big div:nth-child(4){

background-color: blue;

transform: rotateX(90deg) translateZ(-100px);

}

.big div:nth-child(5){

background-color: orchid;

transform: rotateZ(90deg) translateZ(100px);

}

.big div:nth-child(6){

background-color: green;

transform: rotateZ(90deg) translateZ(-100px);

}

</style>

</head>

<body>

<div class="big">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</body>

</html>

由于浏览器兼容问题,没加浏览器哦适配,在谷歌浏览器不会出现错误,其他暂时还没试.

我也是新手,刚学的做出来还挺好看,图片自己换一张200*200的,或者注释掉图片也行.希望对新手有所帮助,

纯CSS3魔方的制作的更多相关文章

  1. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  3. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  4. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  5. CSS源码之纯css3制作的哆啦a梦图片

    本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...

  6. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  7. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  8. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  9. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

随机推荐

  1. 巧用Ajax的beforeSend 提高用户体验

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作.具体可参考jQuery官方文档:http://api.jquer ...

  2. LINQ系列：Linq to Object排序操作符

    LINQ排序操作符包括:OrderBy.OrderByDescending.ThenBy.ThenByDescending及Reverse. 1. OrderBy 1>. 原型定义 public ...

  3. 【Win 10 应用开发】RTM版的UAP项目解剖

    Windows 10 发布后,其实SDK也偷偷地在VS的自定义安装列表中出现了,今天开发人员中心也更新了下载.正式版的SDK在API结构上和以前预览的时候是一样的,只是版本变成10240罢了,所以大家 ...

  4. [汇编与C语言关系]3. 变量的存储布局

    以下面C程序为例: #include <stdio.h> ; ; ; int c; int main(void) { ; char b[] = "Hello World" ...

  5. 【解决】查询无法完成，因为其包含的查找列数已超过管理员强制实施的查找列阈值。Error code=0x80070093; Error source=Groove

    前因: 修改了SharePoint Server 2013 下面的文档库的名称,原先2个汉字,现在8个汉字.结果,SkyDrive Pro 就无法同步了,无论是停止重新同步还是手动填写进行同步都不可以 ...

  6. iOS_MJRefrash的详解以及使用

    MJRefresh Github 效果动态图来这里看吧 该博客Demo下载地址 一. MJRefresh的类解释. 1.MJRefreshComponent              所有刷新控件的基 ...

  7. LeetCode - 72. Edit Distance

    最小编辑距离,动态规划经典题. Given two words word1 and word2, find the minimum number of steps required to conver ...

  8. Angularjs promise对象解析

    1.先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势? var ngApp=angular.module('ngApp',[]) ...

  9. MacOS使用AMPPS环境

      下载(http://www.ampps.com/download)并安装AMPPS 基本配置:2.1选中所有扩展2.2 变更PHP版本为5.3 配置虚拟主机(Virtual Hosts) AMPP ...

  10. Effective java笔记（五），枚举和注解

    30.用enum代替int常量 枚举类型是指由一组固定的常量组成合法值的类型.在java没有引入枚举类型前,表示枚举类型的常用方法是声明一组不同的int常量,每个类型成员一个常量,这种方法称作int枚 ...