一个小例子，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. php 一些常用函数

    1.var_export() var_export — 输出或返回一个变量的字符串表示此函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP ...

  2. Go语言GOMAXPROCS（调整并发的运行性能）

    在 Go语言程序运行时(runtime)实现了一个小型的任务调度器.这套调度器的工作原理类似于操作系统调度线程,Go 程序调度器可以高效地将 CPU 资源分配给每一个任务.传统逻辑中,开发者需要维护线 ...

  3. Mysterious Crime CodeForces - 1043D (哈希)

    大意: 给定m个n排列, 求有多少个公共子串. 枚举每个位置, hash求出最大匹配长度. #include <iostream> #include <sstream> #in ...

  4. 最全最新java面试题系列全家桶(带答案)

    最全最新java面试题系列全家桶(带答案) 置顶 2019年04月06日 22:40:28 青春季风暴 阅读数 14082 文章标签: java面试题技术栈 更多 分类专栏: 面试   版权声明:本文 ...

  5. lua与c的交互(运用)

    (1)lua程序 (2)C++程序(头文件) extern "C" {     #include "lua.h"     #include "lual ...

  6. 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

    盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...

  7. 【1】Zookeeper概述

    一.前言 在"网络是不可靠的"这一前提下,分布式系统开发需要解决如下四个问题: 客户端如何访问众多服务?  解决方案:服务聚合,使用API网关 服务于服务之间如何通信?  解决方案 ...

  8. Delphi 画布对象

    樊伟胜

  9. linux 进程优先级 调度 nice pri

    转:http://www.linuxidc.com/Linux/2016-05/131244.htm 深入 Linux 的进程优先级 [日期:2016-05-11] 来源:liwei.life  作者 ...

  10. 《python解释器源码剖析》第7章--python中的set对象

    7.0 序 集合和字典一样,都是性能非常高效的数据结构,性能高效的原因就在于底层使用了哈希表.因此集合和字典的原理本质上是一样的,都是把值映射成索引,通过索引去查找. 7.1 PySetObject ...