CSS3实现3D六面体
来源：互联网 发布：sql查询表列名 编辑：程序博客网 时间：2024/06/06 12:23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
.cube > div{display:block; position:absolute; width:100px; height:100px; line-height:100px; text-align:center; font-size:60px; color:white;}
.middle{border:1px dashed black; background:transparent;}
.front{border:none; background:rgba(0,0,0,0.3); -webkit-transform:translateZ(50px);}
.back{background:rgba(0,255,0,1); -webkit-transform:translateZ(-50px);}
.right{background:rgba(196,0,0,0.7); -webkit-transform:rotateY(90deg) translateZ(50px);}
.left{background:rgba(0,0,196,0.7); -webkit-transform:rotateY(-90deg) translateZ(50px);}
.top{background:rgba(196,196,0,0.7); -webkit-transform:rotateX(90deg) translateZ(50px);}
.bottom{background:rgba(196,0,196,0.7); -webkit-transform:rotateX(-90deg) translateZ(50px);}
/** -webkit-perspective 透视深度 -webkit-transform-style 指定元素的子元素在3d空间内定位 -webkit-perspective-origin 指定用户从哪个方向看过来的 **/
.cube{margin:300px; width:200px; height:200px; -webkit-perspective:250px; -webkit-transform-style:preserve-3d; -webkit-perspective-origin:-100% -50%;}
</style>
</head>
<body>
<div class="cube">
<div class="middle"></div>
<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>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<title></title>
<style>
.cube > div{display:block; position:absolute; width:100px; height:100px; line-height:100px; text-align:center; font-size:60px; color:white;}
.middle{border:1px dashed black; background:transparent;}
.front{border:none; background:rgba(0,0,0,0.3); -webkit-transform:translateZ(50px);}
.back{background:rgba(0,255,0,1); -webkit-transform:translateZ(-50px);}
.right{background:rgba(196,0,0,0.7); -webkit-transform:rotateY(90deg) translateZ(50px);}
.left{background:rgba(0,0,196,0.7); -webkit-transform:rotateY(-90deg) translateZ(50px);}
.top{background:rgba(196,196,0,0.7); -webkit-transform:rotateX(90deg) translateZ(50px);}
.bottom{background:rgba(196,0,196,0.7); -webkit-transform:rotateX(-90deg) translateZ(50px);}
/** -webkit-perspective 透视深度 -webkit-transform-style 指定元素的子元素在3d空间内定位 -webkit-perspective-origin 指定用户从哪个方向看过来的 **/
.cube{margin:300px; width:200px; height:200px; -webkit-perspective:250px; -webkit-transform-style:preserve-3d; -webkit-perspective-origin:-100% -50%;}
</style>
</head>
<body>
<div class="cube">
<div class="middle"></div>
<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>
0 0
- CSS3实现3D六面体
- CSS3轻松实现彩色旋转六面体动画
- CSS3 实现3D特效
- CSS3 实现3D特效
- CSS3实现3D效果
- css3实现3D切换
- Css3实现3D空间感
- css3+javascript实现旋转3D立方体
- 纯css3实现的3D按钮
- CSS3实现3D立方体旋转效果
- CSS3实现3D旋转菜单导航
- css3—实现3D特效
- css3 实现3D导航栏
- CSS3实现3D方块旋转
- CSS3实现3D立体效果
- CSS3+jQuery实现3D轮播图
- 使用CSS3实现一个3D相册
- css3 js实现3D旋转效果
- php 文件写入
- Java学习笔记-------使用DataOutputStream 、DataInputStream 组合实现C/S通信 ：实例
- Java可变参数个数方法
- 自定义ViewGroup继承FrameLayout 实现下拉刷新功能
- 数据结构基础(13) --链式栈的设计与实现
- CSS3实现3D六面体
- MySQL-5.6.13免安装版配置方法
- C安全编码标准：开发安全、可靠、稳固系统的98条规则（原书第2版）——互动出版网
- jqgrid 日期格式化和反格式化
- 分享》：关于阅读开源项目的源码思路方法
- Google 镜像站搜集
- ThinkPHP 3 介绍及安装
- 企业大数据发展的阶段性
- Android 上滑显示底部导航，下滑显示标题bar
