一个小例子，3D的正方体

<!DOCTYPE html>
　　<html oncontextmenu=self.event.returnValue=false onselectstart="return false"> <!-- 设置在当前网页禁止使用鼠标右键(不允许用户保存网页) -->
<head>
　　<meta charset="utf-8"/>
　　<title>3d效果</title>
　　<style type="text/css">
　　　　*{
　　　　　　margin:0;
　　　　　　padding:0;
　　　　}
　　　　ul,li{
　　　　　　list-style: none;
　　　　}
　　　　.fl{
　　　　　　float:left;
　　　　}
　　　　.ovf{
　　　　　　overflow: hidden;
　　　　}
　　　　.box{
　　　　　　width:100%;

　　　　　　/*透视视距*/
　　　　　　perspective: 1800PX;

　　　　　　/*设置物体正面位置，x轴设置左右，y轴设置上下*/
　　　　　　perspective-origin: 50% 50%;
　　　　}
　　　　.ul-box{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　margin:150px auto;
　　　　　　position: relative;

　　　　　　/*保留当前元素的子元素的3d效果*/
　　　　　　transform-style: preserve-3d;
　　　　}
　　　　.ul-box1{
　　　　　　width:100px;
　　　　　　height:100px;

　　　　　　/*保留当前元素的子元素的3d效果*/
　　　　　　transform-style: preserve-3d;

　　　　　　position: absolute;
　　　　　　top:50%;
　　　　　　left:50%;
　　　　　　transform: translate(-50%, -50%);
　　　　}
　　　　.ul-box:hover{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　　　margin:150px auto;
　　　　　　position: relative;

　　　　　　/*保留当前元素的子元素的3d效果*/
　　　　　　ransform-style: preserve-3d;

　　　　　　animation: rotating 30s linear 0s infinite;
　　　　}

　　　　.list{
　　　　　　margin:0 auto;
　　　　　　width:200px;
　　　　　　height: 200px;
　　　　　　line-height: 200px;
　　　　　　text-align: center;
　　　　　　color:#fff;
　　　　　　letter-spacing: 2PX;
　　　　　　position: absolute;
　　　　　　top:0;
　　　　　　left:0;
　　　　}
　　　　.ulst{
　　　　　　width:200px;
　　　　　　height:200px;
　　　　}
　　　　.lista{
　　　　　　width:calc(33.333333%);
　　　　　　line-height:66.66px;
　　　　　　background-color: #e4963c;
　　　　}
　　　　.list1{
　　　　　　margin:0 auto;
　　　　　　width:100px;
　　　　　　line-height: 100px;
　　　　　　text-align: center;
　　　　　　color:#fff;
　　　　　　letter-spacing: 2PX;
　　　　　　position: absolute;
　　　　　　top:0;
　　　　　　left:0;
　　　　}
　　　　.a{
　　　　　　background-color:rgba(255, 0, 0, .5);
　　　　　　transform:rotate(0deg) translateZ(100px);
　　　　}
　　　　.a1{
　　　　　　background-color:rgba(255, 0, 0, .5);
　　　　　　transform:rotate(0deg) translateZ(50px);
　　　　}
　　　　.ul-box:hover .a{
　　　　　　background-color:rgba(255, 0, 0, .5);
　　　　　　transform:rotate(0deg) translateZ(170px);
　　　　　　/* width:320px;
　　　　　　height:320px;*/
　　　　}
　　　　/*.ul-box:hover .a .ulst .lista{
　　　　　　margin:20px;
　　　　}*/
　　　　.b{
　　　　　　background-color:rgba(0, 255, 0, .5);
　　　　　　transform:rotateY(90deg) translateZ(100px);
　　　　}
　　　　.b1{
　　　　　　background-color:rgba(0, 255, 0, .5);
　　　　　　transform:rotateY(90deg) translateZ(50px);
　　　　}
　　　　.ul-box:hover .b{
　　　　　　background-color:rgba(0, 255, 0, .5);
　　　　　　transform:rotateY(90deg) translateZ(170px);
　　　　}
　　　　.c{
　　　　　　background-color:rgba(0, 0, 255, .5);
　　　　　　transform:rotateY(180deg) translateZ(100px);
　　　　}
　　　　.c1{
　　　　　　background-color:rgba(0, 0, 255, .5);
　　　　　　transform:rotateY(180deg) translateZ(50px);
　　　　}
　　　　.ul-box:hover .c{
　　　　　　background-color:rgba(0, 0, 255, .5);
　　　　　　transform:rotateY(180deg) translateZ(170px);
　　　　}
　　　　d{
　　　　　　background-color:rgba(210, 68, 0, .5);
　　　　　　transform:rotateY(270deg) translateZ(100px);
　　　　}
　　　　.d1{
　　　　　　background-color:rgba(210, 68, 0, .5);
　　　　　　transform:rotateY(270deg) translateZ(50px);
　　　　}
　　　　.ul-box:hover .d{
　　　　　　background-color:rgba(210, 68, 0, .5);
　　　　　　transform:rotateY(270deg) translateZ(170px);
　　　　}
　　　　.e{
　　　　　　background-color:rgba(170, 248, 37, .5);
　　　　　　transform:rotateX(90deg) translateZ(100px);
　　　　}
　　　　.e1{
　　　　　　background-color:rgba(170, 248, 37, .5);
　　　　　　transform:rotateX(90deg) translateZ(50px);
　　　　}
　　　　.ul-box:hover .e{
　　　　　　background-color:rgba(170, 248, 37, .5);
　　　　　　transform:rotateX(90deg) translateZ(170px);
　　　　}
　　　　.f{
　　　　　　background-color:rgba(238, 200, 125, .5);
　　　　　　transform:rotateX(-90deg) translateZ(100px);
　　　　}
　　　　.f1{
　　　　　　background-color:rgba(238, 200, 125, .5);
　　　　　　transform:rotateX(-90deg) translateZ(50px);
　　　　}
　　　　.ul-box:hover .f{
　　　　　　background-color:rgba(238, 200, 125, .5);
　　　　　　transform:rotateX(-90deg) translateZ(170px);
　　　　}
　　　　@keyframes rotating {
　　　　　　0% {
　　　　　　　　transform: rotateY(0deg) rotateX(0deg);
　　　　　　}
　　　　　　25%{
　　　　　　　　transform: rotateY(360deg) rotateX(0deg);
　　　　　　}
　　　　　　50%{
　　　　　　　　transform: rotateY(0deg) rotateX(360deg);
　　　　　　}
　　　　　　75%{
　　　　　　　　transform: rotateY(0deg) rotateX(0deg);
　　　　　　}
　　　　　　100%{
　　　　　　　　transform: rotateY(360deg) rotateX(360deg);
　　　　　　}
　　　　}
　　</style>
</head>

<body>
　　<div class="box">
　　　　<ul class="ul-box">
　　　　　　<li class="list a">
　　　　　　　　HTML
　　　　　　　　<!-- <ul class="ulst ovf">
　　　　　　　　　　<li class="lista fl">0</li>
　　　　　　　　　　<li class="lista fl">1</li>
　　　　　　　　　　<li class="lista fl">2</li>
　　　　　　　　　　<li class="lista fl">3</li>
　　　　　　　　　　<li class="lista fl">4</li>
　　　　　　　　　　<li class="lista fl">5</li>
　　　　　　　　　　<li class="lista fl">6</li>
　　　　　　　　　　<li class="lista fl">7</li>
　　　　　　　　　　<li class="lista fl">8</li>
　　　　　　　　</ul> -->
　　　　　　</li>
　　　　　　<li class="list b">CSS3</li>
　　　　　　<li class="list c">JAVASCRIPT</li>
　　　　　　<li class="list d">JQUERY</li>
　　　　　　<li class="list e">TYPESCRIPT</li>
　　　　　　<li class="list f">VUE</li>

　　　　　　<ul class="ul-box1">
　　　　　　　　<li class="list1 a1">a001</li>
　　　　　　　　<li class="list1 b1">a002</li>
　　　　　　　　<li class="list1 c1">a003</li>
　　　　　　　　<li class="list1 d1">a004</li>
　　　　　　　　<li class="list1 e1">a005</li>
　　　　　　　　<li class="list1 f1">a006</li>
　　　　　　</ul>
　　　　</ul>
　　</div>
</body>
</html>

一个3D正方体的更多相关文章

  1. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  2. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

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

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

  4. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  5. 如何用webgl(three.js)搭建一个3D库房-第一课

    今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...

  6. DirectX11--实现一个3D魔方(3)

    前言 (2019/1/9 09:23)上一章我们主要讲述了魔方的旋转,这个旋转真是有毒啊,搞完这个部分搭键鼠操作不到半天应该就可以搭完了吧... (2019/1/9 21:25)啊,真香 有人发这张图 ...

  7. DirectX11--实现一个3D魔方(2)

    前言 上一章我们主要讲述了魔方的构造和初始化.纹理的准备工作.目前我还没有打算讲Direct3D 11关于底层绘图的实现,因此接下来这一章的重点是魔方的旋转.因为我们要的是能玩的魔方游戏,而不是一个观 ...

  8. DirectX11--实现一个3D魔方(1)

    前言 可以说,魔方跟我的人生也有一定的联系. 在高中的学校接触到了魔方社,那时候的我虽然也能够还原魔方,可看到大神们总是可以非常快地还原,为此我也走上了学习高级公式CFOP的坑.当初学习的网站是在魔方 ...

  9. CSS3D动画制作一个3d旋转的筛子

    希望这个demo能让大家理解CSS3的3d空间动画(其实是个假3D) 首先给一个3d的解剖图,x/y/z轴线轴线已经标出 下面附上添加特效的动画旋转 可以根据demo并参考上面解剖图进行理解 < ...

随机推荐

  1. Mysql中多表删除

    1.从MySQL数据表A中把那些id值在数据表B里有匹配的记录全删除掉 DELETE t2 FROM A t1,B t2 WHERE t1.id = t2.id DELETE FROM t2 USIN ...

  2. 后缀自动机----一种将字符串变成DAG的方法

    后缀自动机 (suffix automaton, SAM) 是一个能解决许多字符串相关问题的有力的数据结构.(否则我们也不会用它) 举几个例子,以下的字符串问题都可以在线性时间内通过 SAM 解决 1 ...

  3. csp模拟赛低级错误及反思

    \(csp\)模拟赛低级错误及反思. 1.没开\(longlong\). 反思:注意数据类型以及数据范围. 2.数组越界(前向星数组未开两倍,一题的数据范围应用到另一题上,要开两倍的写法为开两倍数组) ...

  4. ThinkPHP composer的安装，及image图像处理类库的加载

    以下教程针对windows系统,示例系统使用win7 composer安装 下载composer安装包,点击安装. 出现'composer choose the command-line php' 要 ...

  5. iproute2使用及网络名称空间

    创建一个网络名称空间: 相当于创建一个完全隔离的新网络环境,这个环境包括一个独立的网卡空间,路由表,ARP表,ip地址表,iptables,ebtables,等等.总之,与网络有关的组件都是独立的. ...

  6. 计算广告CTR预估系列(七)--Facebook经典模型LR+GBDT理论与实践

    计算广告CTR预估系列(七)--Facebook经典模型LR+GBDT理论与实践 2018年06月13日 16:38:11 轻春 阅读数 6004更多 分类专栏: 机器学习 机器学习荐货情报局   版 ...

  7. Linux Permission denied 问题

    Linux Permission denied 问题 来源  https://www.cnblogs.com/sparkdev/p/10287164.html 如果当前用户没有某个文件的写权限,又要通 ...

  8. 你不知道的css各类布局（一）之固定布局、静态布局

    前言 当为大量用户设计网站时,设计人员必须考虑到访问者的差异: 屏幕分辨率, 浏览器的选择, 是否在浏览器最大化状态, 浏览器的额外工具栏的开启(历史记录,书签等), 操作系统和硬件. 我们知道css ...

  9. [转载] ReLU和BN层简析

    [转载] ReLU和BN层简析 来源:https://blog.csdn.net/huang_nansen/article/details/86619108 卷积神经网络中,若不采用非线性激活,会导致 ...

  10. O057、Delete Volume 操作

    参考https://www.cnblogs.com/CloudMan6/p/5648665.html   状态为Available 的volume 才能够被delete,如果volume当前已经被at ...