<!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. Bootstrap标签页

    用法 您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文 ...

  2. VScode相关

    这就是我想要的 VSCode 插件! VS Code 快捷键(中英文对照版) visual studio code 配置vue开发环境 vscode 这样的注释怎么生成? 能让你开发效率翻倍的 VSC ...

  3. bzoj 1640||1692: [Usaco2007 Dec]队列变换【后缀数组】

    注意输出是80字符个一行!! 首先贪心很显然,就是两头尽量拿小的. 然后需要处理两头一样的情况,显然是选字典序小的一串,把数组反着接在原数组后面,然后跑sa,判断的时候直接比较rk数组 #includ ...

  4. Akka源码分析-CircuitBreaker（熔断器）

    熔断器,在很多技术栈中都会出现的一种技术.它是在分布式系统中提供一个稳定的阻止嵌套失败的机制. 该怎么理解呢?简单来说,在分布式环境中,如果某个计算节点出现问题,很容易出现失败的逆向传到或整个系统的雪 ...

  5. [Usaco2005 Nov]Asteroids

    Description Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape o ...

  6. Kruskal HDOJ 4313 Matrix

    题目传送门 题意:如何花最小的代价使得一棵树划分开且不含同类节点 分析:当一条边连接的左右集合同类点小于等于1,那么不用删除,将两个集合合并,要求最小代价,那么贪心思想将权值降序排序,删除后剩下的就是 ...

  7. uwp选取文件夹并读取其中的图片

    uwp对文件的操作和wpf,winform等等有很大的不同,主要原因是uwp对权限的要求比较严格,不能想从前那样随心所欲的读取文件. 1.首先找到Package.appxmanifest这个文件,在功 ...

  8. List与类之间的运用，即与javabean的应用

    package com.wh.Object; public class Goods { private String name; private double price; private int n ...

  9. E. The Values You Can Make 背包，同时DP

    http://codeforces.com/problemset/problem/688/E 题目需要在n个数中找出一个集合,使得这个集合的和为val,然后问这些所有集合,能产生多少个不同的和值. 题 ...

  10. JDK常用类解读--StringBuffer、StringBuilder

    上一篇博客讲到String对象一旦被创建该内容就不能被修改了如: String s = "hello world"; s.substring(6); s.replace(" ...