<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>魔方</title>

<style type="text/css">

section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;}

.box {width:100px;height:100px;position:relative;

transform-style:preserve-3d;

transition:4S;

transform-origin:center center -50px;

}

.box div{width: 100px;height:100px;position:absolute;color:white;font-size:50px;text-align: center;line-height:100px;}

.box div:nth-of-type(1){

background: #FF6600;;

transform:translateX(-100px) rotateY(-90deg);

transform-origin:right;

}

.box div:nth-of-type(2){

background:red ;

transform:translateY(-100px) rotateX(90deg);

transform-origin:bottom ;

}

.box div:nth-of-type(3){

background:darkviolet;

transform:translateX(100px) rotateY(90deg);

transform-origin:left;

}

.box div:nth-of-type(4){

background:yellow;

transform: translateY(100px) rotateX(-90deg) ;

transform-origin:top;

}

.box div:nth-of-type(5){

background:green;

transform:translateZ(-100px) rotateY(180deg);

}

.box div:nth-of-type(6){

background:blue;

}

section:hover .box{

transform: rotateX(270deg) rotateY(-270deg) rotateX(-270deg) rotateY(270deg) ;

}

</style>

</head>

<body>

<section>

<div class="box">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

</div>

</section>

</body>

</html>

CSS3 3D环境实现立体 魔方效果代码的更多相关文章

  1. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  2. css3 3d特效汇总

    本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客  css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...

  3. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

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

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

  5. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

  6. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  7. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  8. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  9. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

随机推荐

  1. IIS 发布之后 您要找的资源已被删除、已更名或暂时不可用。 404.0 解决方法

    步骤一: 如图,我发布网站后,在应用程序池中看到默认的.NetFreamork是2.0版本的,我把它改为4.0后 重新浏览网页就正常了. 如果还是不行,那么进行第二步,

  2. Openfire服务器和Spark客户端配置

    一.Openfire服务器的配置 关于之前一直在进行的聊天app的项目,我们还没有完成,这次我们介绍一下,Openfire服务器的配置. 1.Openfire下载 Openfire下载地址:http: ...

  3. Thinking in Java系列 文档+代码+简评

    声明:本人无意侵犯原作者的版权,这里可下载的文档都属于作者自行开放下载的,统一放置在这里是因为不可预测的原因使得原文档和代码不方便下载,故将我所收集的内容统一在这里,如果这里的内容侵犯了别人,请告知我 ...

  4. Linux下自动备份MySQL数据库并上传到远程FTP服务器

    Linux下自动备份MySQL数据库并上传到远程FTP服务器且删除指定日期前的备份Shell脚本 说明:  1.备份MySQL数据库存放目录/var/lib/mysql下面的xshelldata数据库 ...

  5. SpringMVC的REST风格的四种请求方式

    一. 在HTTP 协议里面,四个表示操作方式的动词:GET.POST.PUT.DELETE. ·它们分别对应四种基本操作: 1.GET  ====== 获 取资源 2.POST ======新建资源 ...

  6. DRAM（MT48LC8M32B2）学习

    Micron公司,型号为MT48LC8M32B2的DRAM,其86PIN的 TSOP封装引脚定义 Micron公司,型号为MT48LC8M32B2的DRAM,其86PIN的 TSOP封装引脚定义如上图 ...

  7. 设计一个程序能够将某一个目录下面的所有文件名打印出来---File类的使用

    ,设计一个程序能够将某一个目录下面的所有文件名打印出来 运用到的方法有:返回一个字符串数组,这些字符串指定此抽象路径名表示的目录中的文件和目录:list()           测试此抽象路径名表示的 ...

  8. Android SharedPreferences基本用法

    使用SharedPreferences SharedPreferences是Android平台上一个轻量级的存储类, 用来保存应用的一些常用配置. SharedPreferences与Editor简介 ...

  9. 【渗透课程】第二篇上-http请求协议的简单描述

    HTTP协议剖析 什么是HTTP协议?如何发起请求?我认为这样讲大家能够理解: 浏览器访问网站也是http请求的一个过程.当你打开浏览器,访问一个URL (协议://服务器IP:端口/路径/文件)的时 ...

  10. python中列表 元组 字典 集合的区别

    列表 元组 字典 集合的区别是python面试中最常见的一个问题.这个问题虽然很基础,但确实能反映出面试者的基础水平. (1)列表 什么是列表呢?我觉得列表就是我们日常生活中经常见到的清单.比如,统计 ...