一个小例子，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. PAT B1023 组个最小数(20)

    题目描述 给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的 ...

  2. Yii2.0 组件

    框架之所以是框架,是因为其强大,其封装了很多实用的功能,开发者可以开箱即用. 下边列举Yii2.0的部分组件: var_dump(Yii::$app->session->getId()); ...

  3. Boot-crm管理系统开发教程(一)

    ps:上周就把这个项目写完了,一直忘记记录,现在补上. Boot-crm是书上第十八章的内容,书上提供了前端的代码,所以只需要写后端的代码就可以了,①所以我们先把前端的代码移植到项目中. ②然后在li ...

  4. [多平台]pymo – 手机上的 GalGame 引擎

    [多平台]pymo – 手机上的 GalGame 引擎 介绍下这个能在手机上玩移植 GalGame 的游戏引擎,不知道有多少人听过呢?相信如果有喜欢在手机上玩 GalGame 的同学肯定听过类似的东西 ...

  5. Guava -- 集合类 和 Guava Cache

    Guava -- 集合类 和 Guava Caches 1. 什么是 Guava Guava 是 google 推出的一个第三方 java 库,用来代替 jdk 的一些公共操作,给我印象特别深的就是 ...

  6. Java反射理解（四）-- 获取成员变量构造函数信息

    Java反射理解(四)-- 获取成员变量构造函数信息 步骤 获取成员变量信息: obj.getClass() 获取类类型对象 成员变量也是对象,java.lang.reflect.Field 类中封装 ...

  7. C# 斐波那契数列 第n项数字/前n项的和

    static void Main(string[] args) { int a = Convert.ToInt32(Console.ReadLine()); //求第n位数字是多少 Console.W ...

  8. #!/usr/bin/node 是什么意思

    // 调用系统环境变量中的解释器执行文件 #!/usr/bin/node //如果不是默认安装位置这个地方可能就找不到,那么文件就是报错,所以有了另一种写法 #!/usr/bin/env node

  9. 宝塔控制面板+wordpress搭建个人网站

    上个月买了服务器和域名之后就搁置了,今天有空闲就来配合教程尝试一下搭建个人网站,下面是网站搭建的详细过程以及中间的一些细节问题,写这篇文章的目的就是希望能够帮到一些小伙伴,或者为以后搭建网站做一些参考 ...

  10. vue创建项目步骤

    # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...