<!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. atitit.闭包的概念与理解attilax总结v2 qb18.doc

    atitit.闭包的概念与理解attilax总结v2 qb18.doc 1.1. 闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.1 2. #---- ...

  2. ECMAScript5之Array

    在ECMAScript5中对Array新增的些方法,以前没注意的同志们,嘻嘻,下面我们一起来边看边学. 1.Array之isArray(element) 看到isArray,不言而喻,就是判断一个对象 ...

  3. OracleDBA之表管理

    下面是Oracle表管理的部分,用到的测试表是oracle数据库中scott用户下的表做的测试,有的实验也用到了hr用户的数据,以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家 ...

  4. 微信公众平台开发（二）——access_token、日志

    一.access_token 1)两种access_token,网页授权access_token和普通access_token 1.微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后, ...

  5. IE滤镜及其使用技巧

    Gradient Filter和AlphaImageLoader Filter 这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜,我们先详细介绍下这两个属性的用法,详情 可查看M ...

  6. 搞懂$.each和$(selector).each

    $.each:该方法用于遍历任何集合,包括数组和对象 $(selector).each:该方法用于遍历Jquery对象 语法:$.each(obj,callback,args) ①遍历数组 var a ...

  7. Java位运算总结-leetcode题目

    按位操作符只能用于整数基本数据类型中的单个bit中,操作符对应表格: Operator Description & 按位与(12345&1=1,可用于判断整数的奇偶性) | 按位或 ^ ...

  8. 【集合框架】Java集合框架综述

    一.前言 现笔者打算做关于Java集合框架的教程,具体是打算分析Java源码,因为平时在写程序的过程中用Java集合特别频繁,但是对于里面一些具体的原理还没有进行很好的梳理,所以拟从源码的角度去熟悉梳 ...

  9. PowerDesigner生成Access数据库

    1.打开PowerDesigner,设置PowerDesigner的当前数据库为Access: 2.在PowerDesigner中新建表结构(物理模型): 3.PowerDesigner菜单中:Dat ...

  10. 创建ASP.NET Core MVC应用程序(4)-添加CRUD动作方法和视图

    创建ASP.NET Core MVC应用程序(4)-添加CRUD动作方法和视图 创建CRUD动作方法及视图 参照VS自带的基架(Scaffold)系统-MVC Controller with view ...