<!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. ArcGIS Server 缓存服务切图范围

    win10 + Server 10.4 +  ArcMap 10.4  ArcGIS Server 缓存服务分为创建服务后手动建立缓存和创建服务时同时自动建立缓存两种. 10.2帮助文档:http:/ ...

  2. 坑人的七牛CDN

    最近七牛CDN不知道咋啦的,一下子就不行了,提示错误信息如下 "upload image source key fail: unexpected EOF" 找客服提交工单都没有解决 ...

  3. 关于Memo或者Edit之类控件, 直接设置Text无法撤销的解决方案

    昨天看到群里有人问使用Memo1.Text := '11111';来设置内容的代码无法使用Memo1.Undo的方式来撤销 测试了一下果然如此, 跟踪了VCL代码, 发现Text := '11111' ...

  4. Bluetooth SDP介绍

    目录 1. 概念 2. 服务记录(Service Record) 3. 服务属性(Service Attribute) 4. 服务类(Service Class) 5. 服务查找 5.1 UUID 5 ...

  5. git-svn

    sudo apt-get install git-svn svn作为一个优秀源码版本的管理工具,可以适合绝大多数项目.但是因为它的采用中心化管理,不可避免的存在本地代码的备份和版本管理问题.也就是说对 ...

  6. gogs安装

    1.下载gogs文件,如果图方便可以选择编译好的文件网址https://gogs.io/docs/installation/install_from_binary 2.gogs web运行gogs 3 ...

  7. Java高级之类结构的认识

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! Java体系包括,各种版本的虚拟机,可执行文件,各种第三方类库,Java API类库,Java语言 ...

  8. php--mongodb的安装

    1.mongodb 安装 2.mongodb 扩展 http://pecl.php.net/package/mongo/1.6.14/windows

  9. php--列表展示（小实训一月考）

    效果图:

  10. IIS是如何处理ASP.NET请求的

    每次服务器接受到请求,都要先经IIS处理.这不是一篇描述ASP.NE生命周期的文章,仅仅是关于IIS操作的.在我们开始之前,先了解这些会有助于对全文的理解,同时欢迎反馈和建议. 什么是Web Serv ...