CSS3 3D立方体效果
<!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立方体效果的更多相关文章
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- CSS3之3D立方体效果
下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...
- CSS3 3D立方体翻转菜单实现教程
今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...
- 初识css3 3d动画效果
(先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...
- css3 3d翻转效果
<div class="demo"> <span class="front"> aaaaaaaaaaa ...
- css3实现立方体效果
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>&l ...
- css3 3D盒子效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 基于HTML5/CSS3可折叠的3D立方体动画
今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览 源码下载 实现的代码 ...
随机推荐
- Dubbo源码-从HelloWorld开始
Dubbo简介 Dubbo,相信做后端的同学应该都用过,或者有所耳闻.没错,我就是那个有所耳闻中的一员. 公司在好几年前实现了一套自己的RPC框架,所以也就没有机会使用市面上琳琅满目的RPC框架产品. ...
- 连不上虚拟机中的Redis的原因分析、以及虚拟机网络配置
1. 网络最好是桥接方式.我之前用的是"网络地址转换(NAT)",导致虚拟机里用命令ifconfig得到的ip是10.0.2.15,好奇怪的感觉,然后在真实机上一直连不上.有的说用 ...
- pat 喊山
L3-008. 喊山 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 喊山,是人双手围在嘴边成喇叭状,对着远方高山发出" ...
- Spring Cloud Consul 实现服务注册和发现
Spring Cloud 是一个基于 Spring Boot 实现的云应用开发工具,它为基于 JVM 的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全局锁.决策竞选.分布 ...
- jdk自带的MD5进行数据的加密与解密
package com.tools.util; import java.io.IOException; import java.io.UnsupportedEncodingException; imp ...
- Eclipse配置类似sublime的黑色主题
另一篇中,详细介绍了如何使用Eclipse+Pydev搭建Python环境,传送门:http://www.cnblogs.com/BH8ANK/p/8688110.html 下面介绍下如何在Eclip ...
- 位图（BitMap）
位图 引入:2.给40亿个不重复的无符号整数,没排过序.给一个无符号整数,如何快速判断一个数是否在这40亿个数中. [腾讯] 思路:如果内存够的话,40亿个整型使用位图存储需要500M左右的空间. 分 ...
- JAVA中最容易让人忽视的基础。
可能很多找编程工作的人在面试的时候都有这种感受,去到一个公司填写面试试题的时候,多数人往往死在比较基础的知识点上.不要奇怪,事实就是如此一般来说,大多数公司给出的基础题大概有122道,代码题19道左右 ...
- maven（二）创建工程
创建动态Web工程打war包 File→new→Maven Project→勾上create a simple project→然后next> 然后会报一下的错 解决 创建jav ...
- Python 迭代器之列表解析
 [TOC] 尽管while和for循环能够执行大多数重复性任务, 但是由于序列的迭代需求如此常见和广泛, 以至于Python提供了额外的工具以使其更简单和高效. 迭代器在Python中是以C语言的 ...