<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.wrap{ width:200px;height:200px; padding:200px; border:2px solid #000; -webkit-perspective:800px;}
.box{ width:200px;height:200px; position:relative;-webkit-transform-style:preserve-3d; transition:1s all;}
.box div{ width:200px;height:200px; position:absolute; font-size:100px; color:#fff; line-height:200px; text-align:center;}
.box div:nth-of-type(1){ background:Red;left:0;top:-200px; -webkit-transform-origin:bottom; -webkit-transform:translateZ(100px) rotateX(90deg);}
.box div:nth-of-type(2){ background:yellow;left:-200px;top:0px; -webkit-transform-origin:right; -webkit-transform:translateZ(100px) rotateY(-90deg);}
.box div:nth-of-type(3){ background:blue;left:0px;top:0px;-webkit-transform:translateZ(100px);}
.box div:nth-of-type(4){ background:pink;left:200px;top:0px; -webkit-transform-origin:left; -webkit-transform:translateZ(100px) rotateY(90deg);}
.box div:nth-of-type(5){ background:green;left:0px;top:200px;-webkit-transform-origin:top; -webkit-transform:translateZ(100px) rotateX(-90deg);}
.box div:nth-of-type(6){ background:#f60;left:0px;top:0px; -webkit-transform:translateZ(-100px) rotateX(180deg);}
.wrap:hover .box{ -webkit-transform:rotateX(180deg) rotateY(180deg);}
</style>
</head>
<body>
<div class="wrap">
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
</body>
</html>

CSS3 3D立方体效果的更多相关文章

  1. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  2. CSS3之3D立方体效果

    下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...

  3. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  4. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  5. css3 3d翻转效果

    <div class="demo">       <span class="front">            aaaaaaaaaaa ...

  6. css3实现立方体效果

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>&l ...

  7. css3 3D盒子效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  9. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

随机推荐

  1. gif文件解析

    详细资料:http://blog.csdn.net/wzy198852/article/details/17266507 MD5:98206F88B84CCC399C840C8EEC902CCF GI ...

  2. Mybatis转义字符

    Mybatis的sql语句中需要用到'>'或者'<'时,不能直接使用. < < 小于号 > > 大于号 & & 和 &apos; ' 单引号 ...

  3. 基于jquery的插件开发

    最近在公司做一个项目,由于后台数据太多需要分页显示,在网上找了很多插件都没有找到合适的分页插件,所有的分页插件始终达不到自己想要的效果.由于这个项目也不是很赶,就在网上查找各种资料,自己写一个基于jq ...

  4. [福大软工] W班 软工实践原型设计—成绩公布

    作业地址 https://edu.cnblogs.com/campus/fzu/FZUSoftwareEngineering1715W/homework/909 作业要求 详见作业地址 存在问题 1. ...

  5. Beta 第一天

    一.今日任务 重新熟悉整体项目 对整个项目在未来的beta冲刺中进程有一个合理的规划 由于我们送出的是一个负责前端的成员,引入的也是一个负责前端工作的女生,(女生做起美工比起男生更加得心应手吧)所以我 ...

  6. MyGod--Beta版本前期报告

    下一阶段需要改进完善的功能 1.完善购买功能,商品购买后,将生成申请订单,卖家将收到提醒.卖家在完成订单后,可以选择完成订单,商品将下架. 2.完善搜索功能,将界面中的搜索功能添加进去(简单考虑只搜索 ...

  7. prototype 原型链

    // 方法1 var aa=function(){ function bb(){ this.name="1111"; console.log(this.name) }; bb.pr ...

  8. visualVM使用jstatd和jmx连接远程jvm及遇到的问题解决

    visualVM使用jstatd和jmx连接远程jvm及遇到的问题解决 JMX方式: 编辑Tomact里bin目录的catalina.sh . 在其头部加入 JAVA_OPTS=" -Dco ...

  9. 函数式编程之foldLeftViaFoldRight

    问题来自 Scala 函数式编程 一书的习题, 让我很困扰, 感觉函数式编程有点神学的感觉.后面看懂之后, 又觉得函数式编程所提供的高阶抽象是多么的强大. 这个问题让我发呆了好久, 现在把自己形成的想 ...

  10. [知识梳理]课本3&9.1

    函数:关键词:参数.返回值.函数返回类型.函数体. 函数按照返回类型,可以分为有参函数和无参函数. 函数根据是否有返回值,可以分为返回值函数和非返回值函数.     函数的定义:函数的定义可以放在任意 ...