纯CSS3魔方的制作
<!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魔方的制作的更多相关文章
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
随机推荐
- 【转】如何让你的Android SDK下载或者升级快如闪电
准备学习Android开发,但是Android SDK Manager界面都刷不出来,今天看到了一篇文章,顿时就解决了,原文地址http://qichaochen.github.io/2014/12/ ...
- Atom支持Markdown和Latex
本篇博客主要用于记录Atom编辑器同时支持markdown和latex: 1.安装 安装方法1: (Windows系统)File->Settings->Install中搜索markdown ...
- 关于SubSonic3.0插件使用SqlQuery或Select查询时产生的System.NullReferenceException异常修复
早上在编写执行用例时,突然爆异常System.NullReferenceException: 未将对象引用设置到对象的实例 执行代码:
- 出操队形（LIS）
题目来源:微策略2013年校园招聘面试一面试题 题目描述: 在读高中的时候,每天早上学校都要组织全校的师生进行跑步来锻炼身体,每当出操令吹响时,大家就开始往楼下跑了,然后身高矮的排在队伍的前面,身高较 ...
- iOS 保持界面流畅的技巧 （转载）
这篇文章会非常详细的分析 iOS 界面构建中的各种性能问题以及对应的解决思路,同时给出一个开源的微博列表实现,通过实际的代码展示如何构建流畅的交互. Index 演示项目 屏幕显示图像的原理 卡顿产生 ...
- Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解
首先我们找到这个类. 这个类有如下的方法: #region Title & meta [Obsolete("Use HtmlTitle")] public IHtmlStr ...
- Scala比较器：Ordered与Ordering
在项目中,我们常常会遇到排序(或比较)需求,比如:对一个Person类 case class Person(name: String, age: Int) { override def toStrin ...
- MapReduce 单词统计案例编程
MapReduce 单词统计案例编程 一.在Linux环境安装Eclipse软件 1. 解压tar包 下载安装包eclipse-jee-kepler-SR1-linux-gtk-x86_64.ta ...
- string转byte[]
static byte[] GetBytes(string str) { byte[] bytes = new byte[str.Length * sizeof(char)]; System.Buff ...
- C#学习笔记-封装
前言 说起来惭愧,学了大半年的C#,其实最开始就接触到了封装的部分,但是一直模模糊糊的弄不清楚,也觉得没什么影响就没怎么在意,现在才开始认真的看这部分内容,看懂了过后好多东西清晰了不少,才发现封装这个 ...