开通黄钻

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. [总结]SHAREPOINT - CAML列表查询（上）

    首先要了解的是CAML(Collaboration Application Markup Language)不仅仅是用在对列表.文档库的查询,字段的定义,站点定义等处处使用的都是CAML. 简单的提一 ...

  2. Linux命令之添加权限Chmod的使用

    chmod是change mode的缩写,是修改文件权限的一个命令: 一个文件分别有三组权限:用户拥有者,用户组 第一个横杆-表示文件,如果是d表示目录.还有可能是l,表示链接. 第一组(rw-)表示 ...

  3. T-SQL在线格式化工具

    http://www.dpriver.com/pp/sqlformat.htm?ref=g_wangz

  4. 概念：RPG游戏中两个兵种互相攻击的逻辑

    直接上题目: 解析题目: 根据题目的解析,进行代码的实现: 输出结果: 心得: (1) 当我们面对‘公式结果不是我们想要的’时,应该在脑海里将一个完整的攻击流程进行想象,就会对流程有个更清晰的思路 ( ...

  5. 如何在CRM WebClient UI里使用HANA Live Report

    1. 使用业务角色ANALYTICSPRO登录SAP CRM WebClient UI: 点击新建按钮创建一个新的HANA live report: 类型选择SHL: 弹出窗口,维护report的名称 ...

  6. 2017.11.17 C++系列---用malloc动态给c++二维数组的申请与释放操作

    方法一:利用二级指针申请一个二维数组. #include<stdio.h> #include<stdlib.h> int main() { int **a; //用二级指针动态 ...

  7. python将图像转化为矩阵

    Image.fromarray(matrix).show()

  8. Python中的__name__和__main__含义详解

    1背景 在写Python代码和看Python代码时,我们常常可以看到这样的代码: ? 1 2 3 4 5 def main():     ......   if __name == "__m ...

  9. pooling

    转自:http://www.gageet.com/2014/09182.php 本文部分参考了:http://www.zhihu.com/question/23437871 卷积层是对图像的一个邻域进 ...

  10. ajaxfileup.js

    <img id="tinyPic" class="user-icon" :src="headPortrait"><inpu ...