<!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. Laravel 5.3 auth中间件底层实现详解

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  2. bootstrap-modal 学习笔记 源码分析

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...

  3. iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流

    在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...

  4. 关于在BAE上部署ThinkPHP框架的问题

    现在有点小兴奋,因为在在BAE上部署ThinkPHP框架的问题快折腾一天了,午觉都没睡,不过没白整总算有点结果.不扯淡了,直入正题吧. 之前熟悉ThinkPHP框架,想在BAE上用ThinkPHP做点 ...

  5. Oracle数据库全球化

    一.自定义数据库和各个会话的语言相关行为 1.1 全球化功能 1.2 使用全球化支持功能 二.使用数据库和NLS字符集 2.1 语言排序与选择 2.2 Locale Builder 2.3 使用时区 ...

  6. 软件工程 Coding.net代码托管平台 Git初学者的使用总结 五步完成 程序，文件，文件夹的Git

    一.前言 第一次用git相关的命令行,我使用的是Coding.net代码托管平台.Coding.net 自主打造的基于 Git 的代码托管平台,提供高性能的远端仓库,还有保护分支,历史版本分屏对比. ...

  7. 跟我学PHP第二篇- 配置Mysql以及PHP WampServer篇（1）

    大家好,昨天我给大家介绍了如何去安装ZEND STUDIO,下面昨天文章的链接: http://www.cnblogs.com/kmsfan/p/zendStudio.html 本节为配置的第一部分, ...

  8. Moon.Orm性能报告

    以下为有网友公司的评估测试及使用规范 大家可以下载word看看 http://pan.baidu.com/s/1hquvRuc 一.和ADO.NET进行的压力测试 说明:2000并发用户,此图为一网友 ...

  9. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  10. jQuery post数据至ashx

    今天给大家分享一个小功能,在jQuery环境中,Post data to ashx进行数据交互. 参考下面代码示例: $.ajax({ url: '<%= ResolveUrl("~/ ...