<!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. 06_传智播客iOS视频教程_源文件后缀名和main函数

    OC与C语言的不同. 把OC程序运行起来,CPU只会找main函数.并且只会执行main函数当中的代码.当main函数的代码执行完毕之后这个程序就自动结束掉了. main函数的参数是可以让我们在运行程 ...

  2. 初探js闭包

    1.变量的作用域:全局变量.局部变量 函数内部可以直接读取局部变量 js代码 var n=2; function fun(){ alert(n); } fun();  //2 函数外部不能读取函数内部 ...

  3. java笔记之线程方式1启动线程

    * 需求:我们要实现多线程的程序. * 如何实现呢? *   由于线程是依赖进程而存在的,所以我们应该先创建一个进程出来. *   而进程是由系统创建的,所以我们应该去调用系统功能创建一个进程. * ...

  4. bzoj 1556: 墓地秘密【状压dp+spfa】

    显然是状压,显然不可能把所有格子压起来 仔细观察发现只有机关周围的四个格子有用以及起点,所以我们用spfa处理出这些格子两两之间的距离(注意细节--这里写挂了好几次),然后设f[s][i]为碰完的机关 ...

  5. C# DateTime.Now 详解

    //2008年4月24日 System.DateTime.Now.ToString("D"); //2008-4-24 System.DateTime.Now.ToString(& ...

  6. 手机APP测试点总结（参考）

    参考链接:http://www.zengyuetian.com/?p=2305 手机APP测试点: 功能测试:多注意核心业务风险(如:注册.登录.付费.订单等) 兼容性测试:系统兼容性.硬件兼容性.软 ...

  7. 简单的AndroidStudio单元测试工程配置

    转载: http://www.jianshu.com/p/03118c11c199

  8. Windows下安装Ubuntu16.04双系统

    ROS需要在Ubuntu系统上开发,虚拟机跑Ubuntu开发ROS容易出现各种各样的问题,所以需要安装Ubuntu16.04双系统.笔者也是一步步按着网上的帖子来,由于网上的教程都不是最新的而且有的也 ...

  9. codeforces 555B Case of Fugitive

    题目连接: http://codeforces.com/problemset/problem/555/B 题目大意: 有n个岛屿(岛屿在一列上,可以看做是线性的,用来描述岛屿位置的是起点与终点),m个 ...

  10. ACM复习专项

    资料整理 ACM训练营 邝斌的ACM模板 牛客网哈理工ACM教学视频 视频网盘资料(密码:kntr) 1. 训练阶段 第一阶段:练习经典常用算法 (本周任务) 1. 最短路(Floyd.Dijstra ...