<!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. selenium 使用笔记

    下面一段代码是使用selenium访问网页一个小实例 #!/usr/bin/python# -*- coding: utf-8 -*- '''Created on Dec 6, 2013 @autho ...

  2. 随机(Random)

    随机(Random)随机是智能的基础,人工智能的很多技术都需要用到随机,因此有必要把这个提到前面谈谈一考虑基于C/C++,般我们都是使用的rand ()等函数实现随机,当然我们也有吊炸天的boost库 ...

  3. cluster analysis in data mining

    https://en.wikipedia.org/wiki/K-means_clustering k-means clustering is a method of vector quantizati ...

  4. Strong AI Versus Weak AI

    Computer Science An Overview _J. Glenn Brookshear _11th Edition The conjecture that machines can be ...

  5. Delphi 200X、XE中如何用并行实现循环的计算

    interface uses Classes, SysUtils; type TParallelProc = reference to procedure(i: Integer; ThreadID: ...

  6. java.lang.ClassNotFoundException: springosgi

    该问题困扰多天,终于查到原因. 问题:对webwork源码的修改始终无法加载,osgi总是读取源码中未修改的类 com.opensymphony.webwork.dispatcher.Dispatch ...

  7. 【Demo】HTML5 拍照上传

    本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...

  8. Python中dict的特点、更新dict、遍历dict

    dict的第一个特点是查找速度快,无论dict有10个元素还是10万个元素,查找速度都一样.而list的查找速度随着元素增加而逐渐下降. 不过dict的查找速度快不是没有代价的,dict的缺点是占用内 ...

  9. VirtualBox 使用技巧

    一.VirtualBox 的快捷键 VirtualBox 默认的 Host 键是 Right Ctrl Host 键可以点击 Oracle VM VirtualBox 管理器的左上角 “管理”-> ...

  10. mysql 存储过程--- 创建，调用，删除

    DELIMITER //CREATE PROCEDURE p_addscore(nums INT,OUT retrows INT)BEGINDECLARE i INT DEFAULT 0;add_lo ...