一个小例子，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. idea快捷生成

    列模式: shift+alt+insert进入列选择模式,可选择一列或者多列 shift+alt+insert退出列选择模式 大小写转换: Ctrl + Shift + U 循环: iter  增强版 ...

  2. selenium的使用与chromedriver的下载配置

    Selenium是一个web自动化测试工具,最初是为网站自动化测试而开发的,Selenium可以直接运行在浏览器上,它支持所有主流的浏览器,可以接受指令,让浏览器自动加载页面,获得需要的数据,甚至页面 ...

  3. docker入门到放弃

    1.容器简介 Docker是一个开源的应用容器引擎,使用Go语言开发,基于Linux内核的cgroup,namespace,Union FS等技术,对应用进程进行封装隔离,并且独立于宿主机与其他进程, ...

  4. JS 装饰器，一篇就够

    更多文章,请在Github blog查看 在 ES6 中增加了对类对象的相关定义和操作(比如 class 和 extends ),这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候,变得并 ...

  5. day03-04

    光驱 历史的东西 远程管理卡 ​ 它的作用是通过网络远程(异地)开关服务器,并可以查看服务器开关的过程等信息,早期(2010年以前),服务器托管在IDC机房,出问题,还得跑机房或者请机房的人管理,有了 ...

  6. Spectral Norm Regularization for Improving the Generalizability of Deep Learning论文笔记

    Spectral Norm Regularization for Improving the Generalizability of Deep Learning论文笔记 2018年12月03日 00: ...

  7. vs2017 不能加载.vdproj

    需要添加Microsoft Visual Studio Installer Projects扩展  下载地址:https://marketplace.visualstudio.com/items?it ...

  8. mybatis 延迟加载学习

    一.什么是延迟加载 resultMap可实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: ...

  9. DisableThreadLibraryCalls与DLLMain死锁

    1.首先写个简单的DLL,用来验证 BOOL APIENTRY DllMain( HMODULE hModule, DWORD ul_reason_for_call, LPVOID lpReserve ...

  10. MFC下调试 出现 Warning: initial dialog data is out of range.

    在mfc Debug模式下出现"Warning: initial dialog data is out of range."提示..原因是出现在 DDV_MinMaxInt 对应的 ...