<!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. linux 自动登录脚本

    #!/usr/bin/expect set port 22 set user xiaoming set password xiaoming123 set host 111.222.22.33 set ...

  2. Nginx 日志文件切割

    Nginx 是一个非常轻量的 Web 服务器,体积小.性能高.速度快等诸多优点.但不足的是也存在缺点,比如其产生的访问日志文件一直就是一个,不会自动地进行切割,如果访问量很大的话,将 导致日志文件容量 ...

  3. laravel elixir

    npm install npm install jquery --save //bootsrap3.36 与 jquery3不兼容,下载jquery时可能需要确定版本号 npm install jqu ...

  4. 统计学习方法笔记 -- Boosting方法

    AdaBoost算法 基本思想是,对于一个复杂的问题,单独用一个分类算法判断比较困难,那么我们就用一组分类器来进行综合判断,得到结果,"三个臭皮匠顶一个诸葛亮" 专业的说法, 强可 ...

  5. java 使用cookie记录用户上一次访问的时间 记住 用户的 登录名

    package cn.itcast.cookie; import java.io.IOException; import java.io.PrintWriter; import java.util.D ...

  6. 解决微软的两个恶心问题（VS2008死机、Win2008 WAS无法启动）

    1.Visual Studio 2008,在切换到Web设计界面或Html Markup界面时,过一段时间就出现假死,点击任何地方没反应,也关闭不了,只能用任务管理器结束任务. 上网查了下,应该是先装 ...

  7. Java高级之内存模型分析

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 下文是博主感悟,请带着怀疑性的态度阅读! 需要了解基本变量所占 ...

  8. 在zendstudio中添加注释

    /** * * * @access public * @param string $cat_id 分类查询字符串 * @return string */ 然后在function之前的一行打上/**然后 ...

  9. 修改phpmyadmin文件的最大上传大小

    修改php.ini 1.file_uploads on 是否允许通过HTTP上传文件的开关 2.upload_tmp_dir 文件上传至服务器上存储临时文件的地方,如果没指定就会用系统默认的临时文件夹 ...

  10. 非常详细的docker学习笔记

    http://www.open-open.com/lib/view/open1423703640748.html 一.Docker 简介 Docker 两个主要部件: Docker: 开源的容器虚拟化 ...