开通黄钻

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. redis笔记(三)

     redis配置文件 配置文件对单位大小写不敏感 tcp-backlog  511   高并发环境连接数 tcp-keepalive   单位为秒 0 表示不会进行keepalive检测,,,建议设置 ...

  2. 洛谷 P1080 国王游戏

    题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排成一排,国王站在队伍的最 ...

  3. 洛谷 P1849 [USACO12MAR]拖拉机Tractor

    题目描述 After a long day of work, Farmer John completely forgot that he left his tractor in the middle ...

  4. UESTC 757 棋盘

    虽然是水题,但是还是很interesting的.(大概就是我最晚出这个题了... 博弈感觉就是靠yy能力啊.这题是对称性. 最后的必败态是白色格子对称的,一旦对称形成,对手怎么选,跟随就好,对手无法摆 ...

  5. 2017.9.23 HTML学习总结----JavaScript实现输入验证

    定义:对于一个HTML页面中的表单,可以获取其中的各项表单域信息, 利用这些信息,可以判定个表单域所提供的输入值是否合法,是否 符合所要求的格式,这就是表单的输入验证. (1)需要验证的表单输入域的要 ...

  6. MySQL-常用的存储引擎

    MySQL-常用的存储引擎 存储引擎 事务 锁粒度 主要应用 忌用 MyISAM 不支持 支持并发插入的表级锁 select,insert 读写操作频繁 MRG_MYISAM 不支持 支持并发插入的表 ...

  7. git(osChina上分支的使用)

    使用osChina分支的创建分为两种 1.直接在osChina上创建 需要pull否则查看git的状态是不包含改分支的; git pull <git地址/git简称> <分支名> ...

  8. Webpack4 学习笔记三 ES6+语法降级为ES5

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...

  9. OCCI的迭代修改

    传统的在执行多行DML(INSERT.UPDATE.DELETE)时,我们是多次调用executeUpdate():注意!当我们调用一次此函数时,则执行一次网络往返,当数据量大时则效率非常低.不过 O ...

  10. java @override 全部报错

    问.java @override 全部报错 答: 错误:在 eclipse 的新工作空间开发项目时,出现大面积方法编译错误.鼠标放在方法名上后显示让我们去掉 @override 注解 原因: @Ove ...