<!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. c#属性中的get和set属性

    get是给属性赋值,set是取属性的值. get.set用法: 一是隐藏组件或类内部的真是成员: 二是用来建立约束的,比如,实现“有我没你”这种约束: 三是用来响应属性变化事件,当属性变化是做某事,只 ...

  2. 谈谈关键字final

    final:可用于修饰类.方法.变量,表示它修饰的类.方法和变量不可改变. (1)修饰变量:变量只能被赋值一次,赋值后不能更改.按照Java代码惯例,final变量就是常量,而且通常常量名要大写: ① ...

  3. JavaScript 框架设计(二)

    JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...

  4. 缓存Cookie、session、localStorage的区别

    cookie Cookie就是服务器暂存放在你计算机上的一笔资料,好让服务器用来辨认你的计算机.当你在浏览网站的时候,Web服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文 ...

  5. 虚拟目录webconfig的配置

    昨天需要新建一个虚拟目录放在以前的一个站点下,新建了应用池,配好了环境置顶路径,虚拟目录页建立成功 ,但是程序一直是报错.这个程序我在测试服务器上是测过的,新建了一个站点是可以正常访问的,排除了程序问 ...

  6. Windows 10 技术预览版9926 “未知源”引起系统休眠后自启的解决办法

    问题的由来: 自从安装上了最新发布的Windows 10 ,使用起来有诸多的改进:无论是重绘的图标还是通知消息中心的整合还是更智能的OneDrive客户端都使得工作起来非常愉悦. 不过笔者这两天频繁遇 ...

  7. spring笔记--通过注解(annotation)配置Bean

    Spring能够在classpath下自动扫描,侦测和实例化具有特定注解的组件,这在Spring中成为组件扫描(Component scanning). 特定组件的注解包括: @Component:基 ...

  8. angular使用总结

    一．是否有必要加入模块化框架 1.Reqruiejs seajs的主要作用 (1)模块化,让代码易于维护. angular本身就是mvc,模块化很清晰,所以这点用不到requirejs (2)可以按需 ...

  9. js面试题之数组去重对比

    最近看一些面试题,很多都提到了数组去重,用的最多的不外乎就是下面这个例子 arr.filter(function(value,index,arr){ return arr.indexOf(value, ...

  10. 8.Struts2类型转换器

    类型转换器1.引入在Struts2中,请求参数类型不仅可以是String,还可以是其它类型.如,定义一个请求参数birthday为Date类型,给其赋值为1949-10-1,则birthday接收到的 ...