纯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 ...
随机推荐
- C#中的readonly与const的比较
C#中有两种常量类型,分别为readonly(运行时常量)与const(编译时常量),本文将就这两种类型的不同特性进行比较并说明各自的适用场景.工作原理 readonly为运行时常量,程序运行时进行赋 ...
- Android之计算缓存大小并且清空缓存
转载博客:http://www.2cto.com/kf/201503/385492.html 项目中碰到了计算缓存大小和清空缓存的功能,这个很常见的功能,几乎每个APP都有,以为实现很简单,网上搜了一 ...
- Android之登录那点事
随着互联网的高速发展,一个应用为了保护用户的隐私,通常会通过设置用户名+密码的验证方式保证用户隐私的相对安全,我知道一般网站的登录验证,通常会设置一个二维码,通过验证二维码,防止恶意软件通过机械程序, ...
- Delete Volume 操作 - 每天5分钟玩转 OpenStack（57）
今天讨论 cinder 如何删除 volume . 状态为 Available 的 volume 才能够被 delete.如果 volume 当前已经 attach 到 instance,需要先 de ...
- DOM-Document类型
Document类型 JavaScript通过Document类型表示文档.在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,document对象是w ...
- ARC内存管理机制详解
ARC在OC里面个人感觉又是一个高大上的牛词,在前面Objective-C中的内存管理部分提到了ARC内存管理机制,ARC是Automatic Reference Counting---自动引用计数. ...
- 如何部署Icinga服务端
Icinga是Nagios的一个变种,配置,使用方式几乎一样,而且完全兼容Nagios的插件.所以下面的部署方案对Nagios同样使用. 它还推出了两个中文版本,icinga-cn原版和icinga- ...
- geotrellis使用（七）记录一次惨痛的bug调试经历以及求DEM坡度实践
眼看就要端午节了,屌丝还在写代码,话说过节也不给轻松,折腾了一天终于解决了一个BUG,并完成了老板安排的求DEM坡度的任务,那么就分两段来表. 一.BUG调试 首先记录一天的BUG调试,简单copy了 ...
- 如何在Windows Server 2008 上添加RD （远程桌面）会话主机配置的远程桌面授权服务器
在Windows Server系列的现存活跃产品中都默认的会开放两个随机附送的远程控制的授权,而一些特殊条件下我们需要启用多个远程终端连接,在购买了相应的授权之后,我们如何将配置好的服务器添加到远程桌 ...
- 高版本->低版本迁移，低版本客户端连接高版本数据库EXP导出报错EXP-00008,ORA-01455,EXP-00000
生产环境: 源数据库:RHEL + Oracle 11.2.0.3 目标数据库:HP-UX + Oracle 10.2.0.4 需求:迁移部分表 11.2.0.3-->10.2.0.4,若 ...