纯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 ...
随机推荐
- 初学Python
初学Python 1.Python初识 life is short you need python--龟叔名言 Python是一种简洁优美语法接近自然语言的一种全栈开发语言,由"龟叔&quo ...
- sql复习第五次
1.在数据库范围内,关系的每一个属性值是不可分解的 关系中不允许出现重复元组 由于关系是一个集合,因此不考虑元组的顺序 2.笛卡儿积是两个关系的所有元组组合而成的,而等值联接是由笛卡儿积和选择运算组合 ...
- Kali信息收集系列：（都是我以前的笔记整理了一下，就没加水印，习惯就好）
好几天没发微信公众号了,今天一起发下.(最近有点事情) 前些天老业界的一位朋友问我一些Safe新时代信息收集的问题 逆天虽然好多年不干老本行,但隔段时间都会关注一下 于是就花了点时间整理了一下,你们就 ...
- v-if VS v-show
在vue实现轮播图效果 中分别用到 v-if和 v-show 下面讲讲我理解的他们的区别: v-if: 根据表达式的值的真假条件渲染元素.在切换时元素及它的数据绑定 / 组件被销毁并重建.如果元素是 ...
- ASP.NET WebAPi之断点续传下载（下）
前言 上一篇我们穿插了C#的内容,本篇我们继续来讲讲webapi中断点续传的其他情况以及利用webclient来实现断点续传,至此关于webapi断点续传下载以及上传内容都已经全部完结,一直嚷嚷着把S ...
- ASP.NET MVC之Session State性能问题（七）
前言 这一节翻译一篇有关Session State性能问题的文章,非一字一句翻译. 话题 不知道我们在真实环境中是否用到了Session State特性,它主要用来当在同一浏览器发出多个请求时来存储数 ...
- Javascript中关键参数this浅析
自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底 ...
- git与svn, tfs等源代码管理器的协同
简单地说,这三个都是业界知名的源代码管理器.他们是有区别的,根本的区别在于git是分布式源代码管理器(每个本地都有完整的代码,及历史),而svn和tfs是集中式源代码管理器(只有服务器才有完整的历史, ...
- GCD 扫盲篇
GCD有四个概念:串行队列.并行队列.同步.异步四者. 如下简介: 这里不仅给出了不确定性,而且也给出了确定性.对于初学者而言,有时候因为那些不确定的东西所造成的疑问会像没有闸却在疾驰的汽车一样让人惊 ...
- 重温JSP学习笔记--El表达式
el表达式是jsp内置的表达式语言,jsp从jsp2.0开始,就不再提倡使用java脚本,而是用el表达式和动态标签来替代,而el表达式主要替代的是jsp中的<%=....%>,也就是说e ...