<!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. zoj 3865

    Superbot Time Limit: 2 Seconds      Memory Limit: 65536 KB Superbot is an interesting game which you ...

  2. Java-Runoob-高级教程-实例-字符串：13. Java 实例 - 字符串格式化

    ylbtech-Java-Runoob-高级教程-实例-字符串:13. Java 实例 - 字符串格式化 1.返回顶部 1. Java 实例 - 字符串格式化  Java 实例 以下实例演示了通过 f ...

  3. WebLogic之eclipse安装WebLogic插件

    转自:https://blog.csdn.net/magi1201/article/details/38323775

  4. Swift4 构造体, 属性, 索引

    创建: 2018/02/19 完成: 2018/02/25 [任务表]TODO  构造体定义  定义的概要 struct 型名 { (变量/常量的定义) (构造函数的定义) (方法的定义) (其他定义 ...

  5. svn报错：privious operation has not finshed;run 'cleanup' if it was interrupted

    在更新svn的过程中,可能中途会取消,取消之后再次更新时可能提示,如下图: 下载sqlite3工具,进入此下载地址:https://www.sqlite.org/download.html 将sqli ...

  6. bzoj 1661: [Usaco2006 Nov]Big Square 巨大正方形【枚举】

    每句两个顶点确定正方形,取max即可 #include<iostream> #include<cstdio> using namespace std; int n,x,y,s, ...

  7. Ocelot（八）- Ocelot不支持的几个方面

    不支持 Ocelot不支持的几个方面 Chunked Encoding - Ocelot将始终获取正文大小并返回Content-Length标头.很抱歉,如果这对您的用例不起作用! 转发主机标头 - ...

  8. UOJ228 简单数据结构练习题

    Description 传送门 维护一个数列, 有以下操作: 对[l,r]同时加上x 把[l,r]开根后下取整. 查询[l,r]之和 n,m \(\leq\)$ 100000, $\(a_i,x \l ...

  9. Polynomial Division 数学题

    https://www.hackerrank.com/contests/101hack45/challenges/polynomial-division 询问一个多项式能否整除一个一次函数.a * x ...

  10. Jmeter+Jenkins+Ant自动化集成环境搭建

    搭建环境: JDK:jdk1.8.0_92 Ant:apache-ant-1.9.7 Jmeter: apache-jmeter-3.0 Jenkins:jenkins-2.19.3 具体环境配置 1 ...