开通黄钻

Css3 -3D效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/jquery/dist/jquery.slim.js"></script>
    <style>
        body{
            margin: 400px;
        }

        #main{
            perspective: 2000px;
        }

        #main ul{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            animation: move 5s infinite linear both;
            transform-origin: 100px 100px -100px;
        }

        #main ul li{
            position: absolute;
            width: 196px;
            height: 196px;
            line-height:196px;
            border:2px solid #000;
            background:rgba(152,215,152,0.5);
            font-size:40px;
            text-align: center;
            list-style:none;
            color: #ffffff;
            left:0;
            top:0;
        }

        #main ul li:nth-child(1){
            top: -200px;
            transform: rotateX(90deg);
            transform-origin: bottom;
        }
        #main ul li:nth-child(2){
            top: 200px;
            transform: rotateX(-90deg);
            transform-origin: top;
        }

        #main ul li:nth-child(3){
            left: -200px;
            transform: rotateY(-90deg);
            transform-origin: right;
        }

        #main ul li:nth-child(4){
            left: 200px;
            transform: rotateY(90deg);
            transform-origin: left;
        }

        #main ul li:nth-child(5){
            transform: translateZ(-200px);
        }

        #main ul li:nth-child(6){
            transform: translateZ(0px);
        }

        @keyframes move {
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }

            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

    </style>
</head>
<body>

<div id="main">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

</body>
</html>

css3 3D的更多相关文章

  1. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  2. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  3. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

  4. css3 3D旋转效果

    css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...

  5. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  6. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  7. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  8. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  9. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

  10. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

随机推荐

  1. Zamplus 晶赞天机

    类型: 定制服务 软件包: car/vehicle integrated industry solution collateral tourism 联系服务商 产品详情 解决方案 概要 DMP:通常称 ...

  2. 笨办法学Python（二十二）

    习题 22: 到现在你学到了哪些东西? 这节以及下一节的习题中不会有任何代码,所以也不会有习题答案或者加分习题.其实这节习题可以说是一个巨型的加分习题.我将让你完成一个表格,让你回顾你到现在学到的所有 ...

  3. Microsoft EDP（enterprise database protection）选择应用程序在哪里可以访问企业数据

    在配置策略时,对Rule template设置完成后,添加corporate identity.关于corporate identity, 目前没有什么好的理解,翻译过来就是“公司标识”,我也理解不了 ...

  4. Arduino入门教程--课前准备--Arduino驱动安装及1.0 IDE菜单介绍

    编译器版本:Arduino 1.0实验器件:ocrobot mango控制板(Arduino兼容)一块 Arduino控制板到手后,首先需要在电脑上把驱动装上,这样才可以进行各种实验. 第一步需要把A ...

  5. Aizu The Maximum Number of Customers

    http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=DSL_5_A The Maximum Number of Customers Ide ...

  6. Django Field lookups （字段查找）

    字段查找是指定SQL WHERE子句的核心内容的方式. 它们被指定为QuerySet方法filter().exclude()和get()的关键字参数. 1.exact:精确查找.如果为比较提供的值为N ...

  7. dd-wrt ddns更新失败由于电信提供的ip不是公网ip

    由于电信提供的ip地址原来是公网的ip,后来电信通过nat提供一个内网ip,导致ddns更新失败.电话给电信客服10000号,让他们修改回来之后就可以了. 如果ddns更新失败,尤其是原本是正常的,后 ...

  8. 小程序wx.request的POST方法的参数传输服务器接收不到

    这是API里面的例子: 而实际这样,服务端拿到的是空值. 将header更改一下,application/x-www-form-urlencoded,则可以让服务器收到数据

  9. 2018年第九届蓝桥杯【C++省赛B组】第三题 乘积尾零

    如下的10行数据,每行有10个整数,请你求出它们的乘积的末尾有多少个零?5650 4542 3554 473 946 4114 3871 9073 90 43292758 7949 6113 5659 ...

  10. 【JS-Java-EL】JavaScript和Java(EL表达式)引发的 Uncaught SyntaxError: Unexpected token ILLEGAL

    2018.10.14 BUG原因: 在较早期的代码中,容易出现 JS 拼接 HTML 代码字符串的情况.如 // 页面 test.jsp 内部的 JS 代码 // ${} JSP中EL语法,内部为Ja ...