<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>transform-style_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
body {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.cube {
position: relative;
font-size: 80px;
width: 2em;
margin: 1.5em auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-30deg) rotateY(30deg);
transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
position: absolute;
width: 2em;
height: 2em;
background: rgba(0, 0, 0, .1);
border: 1px solid #999;
color: white;
text-align: center;
line-height: 2em;
}
.front {
-webkit-transform: translateZ(1em);
transform: translateZ(1em);
}
.top {
-webkit-transform: rotateX(90deg) translateZ(1em);
transform: rotateX(90deg) translateZ(1em);
}
.right {
-webkit-transform: rotateY(90deg) translateZ(1em);
transform: rotateY(90deg) translateZ(1em);
}
.left {
-webkit-transform: rotateY(-90deg) translateZ(1em);
transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
-webkit-transform: rotateX(-90deg) translateZ(1em);
transform: rotateX(-90deg) translateZ(1em);
}
.back {
-webkit-transform: rotateY(-180deg) translateZ(1em);
transform: rotateY(-180deg) translateZ(1em);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>

css 正方体的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS实现正方体旋转

    代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UT ...

  3. 纯css耍个透明正方体转一转

    效果 效果图如下 ​ 实现思路 定义一个最外层的容器,用来控制显示的位置 定义一个父容器,用来设置元素被查看位置的视图,这里使用到CSS3的perspective 属性 定义子容器,设置为相对定位,利 ...

  4. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  5. 使用纯css鼠标移入效果,炫酷的旋转正方体

    首先我们需要创建几个盒子 </div> <div class="wrap"> <div class="cube"> < ...

  6. 用html标签+css写出旋转的正方体

    有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写.下面看一下我写的. 这一段是样式表: <style> *{ margin: 0; ...

  7. 【CSS进阶】试试酷炫的 3D 视角

    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...

  8. 3d转换-正方体-Html5Css3-遁地龙卷风

    (-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...

  9. CSS学习目录

    前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...

随机推荐

  1. PHP 多个文件上传

    关键函数: is_uploaded_file():用于判断指定的文件是否是通过 HTTP POST 上传的,如果是则返回 TRUE.用于防止潜在的攻击者对原本不能通过脚本交互的文件进行非法管理,这可以 ...

  2. SQL查询（二）

    常用查询技巧 1.获取数据的前3(n)行 ; 2.SQL语句中if语句 在SQL语句中没有直接的if语句,但是有两个函数:DECODE和CASE,他们能够实现if语句的功能 2.1)decode -- ...

  3. getWindow().setFlags

    //设置窗体全屏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams ...

  4. 【运维工具】logrotate 日志管理神器

    服务器经常会产生各种各样的日志文件,我们需要定期清理 日志的分类 系统日志 应用日志 系统日志 例如系统的history 历史信息   crontab的运行日志  一般系统日志系统都帮我们运维好了,不 ...

  5. MySQL- 锁(2)

    InnoDB行锁实现方式 InnoDB行锁是通过给索引上的索引项加锁来实现的,这一点MySQL与Oracle不同,后者是通过在数据块中对相应数据行加锁来实现的.InnoDB这种行锁实现特点意味着:只有 ...

  6. Charles辅助调试接口

    http://blog.sina.com.cn/s/blog_6ae8b50d0102w7tw.html

  7. X-UA-Compatible是神马

    X-UA-Compatible是神马 X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使 ...

  8. jQuery 遍历json数组的实现代码

    <script type="text/javascript"> "}]; $(d1).each(function(){ alert(this.text+&qu ...

  9. 去除Html标签

    public static string ParseTags(string Htmlstring)     {         //删除脚本          Htmlstring = Regex.R ...

  10. JavaScript正则表达式（二）

    定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...