开通黄钻

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. 使用sqlyog连接ubuntu mysql server错误解决方案

    现在很多服务都部署在linux环境中,但是在开发阶段,使用windows远程连接工具,直观,这对开发人员更友好. 下面是我在ubuntu16.04使用mysql- server时,遇到了一下的问题,以 ...

  2. UITabBarController动态添加TabBarItem

    NSArray *titles = @[L(@"首页"), L(@"新闻"), L(@"消息"), L(@"我的")]; ...

  3. 第二章 LCD液晶显示屏&声控装置&播放音乐&遥控器

    这节我将带大家了解亮宁机器人编程的基础部分. LCD液晶显示屏 LCD液晶显示屏是在实现某种功能和调试中不可缺少的部分,接下来我带大家学习,如何使用LCD液晶显示屏. 首先我们把LCD液晶显示屏插入主 ...

  4. JAVA去掉HTMl以及CSS样式

    封装方法如下 public String delHTMLTag(String htmlStr){ String regEx_style="<style[^>]*?>[\\s ...

  5. python图形库（1）

    python有很好图形库cv2(包含很多图形处理的算法),pylab(绘图工具模块) 这两个“模块”是肯定要配置的. 安装这两个模块可用了我不少时间. pylab它不是一个包,而是 numpy, sc ...

  6. [论文理解]关于ResNet的进一步理解

    [论文理解]关于ResNet的理解 这两天回忆起resnet,感觉残差结构还是不怎么理解(可能当时理解了,时间长了忘了吧),重新梳理一下两点,关于resnet结构的思考. 要解决什么问题 论文的一大贡 ...

  7. 在TextBox控件中禁用鼠标右键

    实现效果: 知识运用: MouseEventArgs类的Button属性     TextBox控件的ContextMenu属性 实现代码: private void textBox1_MouseDo ...

  8. python web应用--WSGI接口（二）

    WSGI接口定义非常简单,它只要求Web开发者实现一个函数,就可以响应HTTP请求.我们来看一个最简单的Web版本的“Hello, web!”: 1 # server.py 2 # 从wsgiref模 ...

  9. python 面向对象（四）--实例属性和类属性

    由于Python是动态语言,根据类创建的实例可以任意绑定属性. 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Student(object): def __init__(se ...

  10. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...