一个小例子，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. 大数据之Zookeeper概述

    Zookeeper概述 Zookeeper是一个开放源码的分布式应用程序协调服务,是 Google的Chubby一个开源的实现,是 Hadoop和 HBASE的重要组件.主要解决分布式应用一致性问题. ...

  2. 永久修改Putty设置

    在使用远程登录Putty时,会发现修改一些设置并且退出后发现自己之前改的设置不见了,可以通过保存设置解决 假设我要修改远程终端的背景颜色,选择系统颜色 勾选后,如果不保存下次登入时又要进行设置 点击D ...

  3. 屹今为止最好用的HTTP客户端命令行工具-接口调试神器HTTPie

    一.思考❓❔ 1.你用过哪些http客户端调试工具? Postman 不够灵活 需要打开客户端, 麻烦 学习成本高 Jmeter 臃肿 麻烦 学习成本高 curl 参数多, 记不住 不够灵活 主要在L ...

  4. python中while循环打印星星的四种形状

    在控制台连续输出五行*,每一行星号数量一次递增 * ** *** **** ***** #1.定义一个行计数器 row = 1 while row <= 5: #定义一个列计数器 col = 1 ...

  5. 【原创】大数据基础之Kudu（4）spark读写kudu

    spark2.4.3+kudu1.9 1 批量读 val df = spark.read.format("kudu") .options(Map("kudu.master ...

  6. 谷歌浏览器禁用JS步骤

    前奏: 当你想访问一个页面,因为不符合访问条件,而被JS阻拦:或者你打开的页面特效太多,干扰视线:亦或者JS的某个功能禁止了你的某些行为: 是不是很难受, 好办,咱给他禁了不就好啦,大胆地屏蔽它,不管 ...

  7. requests 抓取网站

    import requests from requests.exceptions import RequestException import re import json def get_one_p ...

  8. PHP之开发环境搭建

    日常开发中,环境的搭建是我们开发的基础,这里介绍几种快速搭建PHP开发环境的方式. 1)lnmp一键安装包[https://lnmp.org] LNMP一键安装包是一个用Linux Shell编写的可 ...

  9. svn经典总结

    大佬的svn:http://www.cnblogs.com/armyfai/p/3985660.html#!comments https://www.cnblogs.com/0zcl/p/730976 ...

  10. Webmin代码执行漏洞复现

    0x00 前言之前由于hw,没得时间分析.这个webmin相信大家很多次都在内网扫到过.也是内网拿机器得分的一环. 0x01影响版本Webmin<=1.920 0x02 环境搭建 建议大家以后用 ...