<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        @w:200px;
        .box{
            width: @w;
            height: @w;
            position: relative;
            margin: 200px auto 0;
            perspective: 2000px;//景深
            transform-style: preserve-3d;
            ul{
                list-style: none;
                width: @w;
                height: @w;
                position: relative;
                transform: rotateX(30deg) rotateY(45deg);
                transform-style: preserve-3d;// 加到父亲盒子上边
                animation: move 5s linear infinite;
                transform-origin: @w / 2  @w / 2 -@w/2;
                // 2s  运动时长   linear匀速运动  infinite 不限次数运动
                li{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    background: rgba(151,255,151,0.6);
                    text-align: center;
                    line-height: @w;
                    font-size: 40px;
                    border: 1px solid #000;
                    box-sizing: border-box;
                }
                li:nth-child(1){
                    transform: translateY(-@w) rotateX(90deg);
                    transform-origin: bottom;
                }
                li:nth-child(2){
                    transform: translateY(@w) rotateX(-90deg);
                    transform-origin: top;
                }
                li:nth-child(3){
                    transform: translateX(-@w) rotateY(-90deg);
                    transform-origin: right;
                }
                li:nth-child(4){
                    transform: translateX(@w) rotateY(90deg);
                    transform-origin: left;
                }
                li:nth-child(5){
                    transform: translateZ(-@w) rotateX(180deg);
                }
            }
            @keyframes move{
                0%{
                    transform: rotateX(0) rotateY(0);
                }
                100%{
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
        }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>
</html>
<script>
</script>

3D超炫酷旋转的更多相关文章

  1. 3D HTML5 Logo标志 超炫酷旋转特效

    今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标 ...

  2. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  3. 8个超炫酷仿HTML5动画源码

    1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历 ...

  4. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

  5. css3-rotate实现超炫环形旋转特效

    css3-rotate实现超炫环形旋转特效,css3特效,环形旋转,圆形旋转,css3-rotate实现超炫环形旋转特效是一款采用css3 rotate实现的蓝色环形旋转特效代码. http://ww ...

  6. 8个超炫酷的jQuery相册插件欣赏

    在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...

  7. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  8. 超炫酷的jQuery/HTML5应用效果及源码

    jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和j ...

  9. 手把手带你做一个超炫酷loading成功动画view Android自定义view

    写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...

随机推荐

  1. 微信公众号开发——创建自定义菜单（PHP版）

    <?php include "TokenUtil.php"; //TokenUtil::build_access_token(); $access_token = Token ...

  2. 微信公众平台——基础配置——服务器配置：PHP版

    在自己的服务器上新建一个空白php文件,输入以下任一版本的代码,如下: 版本一: <?php $token = "dige1994"; $signature = $_GET[ ...

  3. Gym 100512F Funny Game (博弈+数论)

    题意:给两个数 n,m,让你把它们分成 全是1,每次操作只能分成几份相等的,求哪一个分的次数最多. 析:很明显,每次都除以最小的约数是最优的. 代码如下: #pragma comment(linker ...

  4. 阿里DNS 223.5.5.5 223.6.6.6 (转载)

    转自:http://it.oyksoft.com/post/6780/ 阿里DNS:   223.5.5.5       223.6.6.6 为何用它? 一.选择阿里DNS让你购物更爽,如果是淘宝狂人 ...

  5. 鸭子类型(Duck Typing)

    鸭子类型(Duck Typing) 动态类型.没有类型检验.不关注类型,关注方法 相当于静态类型语言的多态 这是程序设计中的一种类型推断风格,这种风格适用于动态语言(比如PHP.Python.Ruby ...

  6. 【OpenJ_Bailian - 4070 】全排列

    全排列 Descriptions: 对于数组[1, 2, 3],他们按照从小到大的全排列是 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3 2 1 现在给你一个正整数n,n小于8,输出 ...

  7. CentOS 6.2 X64上64位Oracle11gR2 静默安装，静默设置监听，静默建库经验

    1 安装前环境:  操作系统:CetnOS6.2x64 最小化安装,已配置好网络IP:172.16.2.182,物理内存8GB,硬盘100GB.  已下载: Linux.x64_11gR2_datab ...

  8. C#委托的用法 在C#中我想在一个方法中调用另一个按钮的事件,怎样来实现?

    最开始我也不清楚,后来我是这样想了. 1.事件和委托不是一个概念,你如果是调用control的事件,可以直接在其对应的事件eventhandler上attach自己的事件方法就好了如:this.But ...

  9. DEV—【GridControl主从表】

    先附上效果图,不是想要这个效果的朋友就不用可以继续寻找了. DEV—GridControl制作主从表: (注:此例没有用到数据库,只是单纯的在内存中操作数据.) 写这一笔,是为了能更好的理解主从表,的 ...

  10. Java 线程是什么-渐入佳境

    线程:(一)什么是线程 管哥说:程序中有多个执行流就叫多线程.多线程是多任务的一种特别的形式.好处:单个程序可以创建多个并发执行的程序来完成各自的任务.多线程能满足程序员编写高效率的程序来达到充分利用 ...