1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. body{background: black;}
  9. div{
  10.     width:400px;
  11.     height:400px;
  12.     border:1px solid pink;
  13.     perspective:500px;
  14.     perspective-origin: top;
  15.     }
  16. ul{
  17.     position: relative;
  18.     transform-style: preserve-3d;
  19.     margin:150px;
  20. }
  21. li{position:absolute;
  22.     width:100px;
  23. height:100px;
  24. background:pink;
  25. opacity:0.3;}
  26. ul li:nth-child(2n){background: yellow;}
  27. ul li:nth-child(1){
  28.     transform:translateZ(200px);
  29. }
  30. ul li:nth-child(12){
  31.     transform:translateZ(-200px);
  32. }
  33. ul li:nth-child(2){
  34.     transform:rotateY(90deg)translateZ(200px);
  35. }
  36. ul li:nth-child(11){
  37.     transform:rotateY(-90deg)translateZ(200px);
  38. }
  39. ul li:nth-child(3){
  40.     transform:rotateY(30deg)translateZ(200px);
  41. }
  42. ul li:nth-child(10){
  43.     transform:rotateY(-150deg)translateZ(200px);
  44. }
  45. ul li:nth-child(4){
  46.     transform:rotateY(60deg)translateZ(200px);
  47. }
  48. ul li:nth-child(9){
  49.     transform:rotateY(-120deg)translateZ(200px);
  50. }
  51. ul li:nth-child(5){
  52.     transform:rotateY(120deg)translateZ(200px);
  53. }
  54. ul li:nth-child(8){
  55.     transform:rotateY(-60deg)translateZ(200px);
  56. }
  57. ul li:nth-child(6){
  58.     transform:rotateY(150deg)translateZ(200px);
  59. }
  60. ul li:nth-child(7){
  61.     transform:rotateY(-30deg)translateZ(200px);
  62. }
  63. </style>
  64. </head>
  65.  
  66. <body>
  67. <div>
  68. <ul>
  69.     <li>1</li>
  70.     <li>2</li>
  71.     <li>3</li>
  72.     <li>4</li>
  73.     <li>5</li>
  74.     <li>6</li>
  75.     <li>7</li>
  76.     <li>8</li>
  77.     <li>9</li>
  78.     <li>10</li>
  79.     <li>11</li>
  80.     <li>12</li>
  81.  
  82. </ul>
  83. </div>
  84. </body>
  85. </html>
  86.  

3D旋转动画练习 demo的更多相关文章

  1. Css3 3D 旋转动画效果

    需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...

  2. 3D旋转动画

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  3. css3 3d旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. CSS3 3D旋转动画代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS3 3D旋转动画菜单

    在线演示 本地下载

  6. 3d旋转动画焦点图

    在线演示 本地下载

  7. CSS3鼠标滑过图片3D旋转动画

    在线演示       本地下载

  8. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  9. Android立体旋转动画实现与封装（支持以X、Y、Z三个轴为轴心旋转）

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

随机推荐

  1. UPYUN云服务体验计划，阅读神器Kindle、LaCie移动硬盘、索尼大法充电宝、高大上极路由、UPYUN代金券等你拿！

    请看以下的“通关攻略”,分享你对云服务的“体验心得”,即可赢取绝佳的“通关宝藏”,阅读神器Kindle.LaCie移动硬盘.索尼大法充电宝.高大上极路由.UPYUN代金券等你拿!先来了解下UPYUN能 ...

  2. JS模式--职责链模式

    职责链模式的定义:使用多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链, 并沿着这条链条传递下去,直到有一个对象处理它为止. var order500 = f ...

  3. Javascript中Array（数组）对象常用的几个方法

    Javascript中Array数组的几个常用方法 pop()  --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice()  --按照下 ...

  4. 单Js 的重力游戏开发

    最近在用看cocos的时候萌生的想法,单纯js实现重力原理.然后就做了一个这样的小游戏.姑且命名为<超级玛丽>! 因为之前有人要我做超级玛丽.哈哈哈哈哈哈!这也算完成任务了吧. 先说一下原 ...

  5. stl_alloc.h分配器

    五.分配器:5.1.头文件: 5.1.1.include<stl_alloc.h> //内存的分配. 5.1.2.include<stl_construct.h> //对象的构 ...

  6. java并发程序——并发容器

    概述 java cocurrent包提供了很多并发容器,在提供并发控制的前提下,通过优化,提升性能.本文主要讨论常见的并发容器的实现机制和绝妙之处,但并不会对所有实现细节面面俱到. 为什么JUC需要提 ...

  7. 我是这样发现ISP劫持HTTP请求的

    编者按:Fundebug的客户通过分析我们提供的报警信息,定位了一个非常棘手的问题—ISP劫持http请求.他的分析过程非常有意思,同时也提醒我们,应该及时支持HTTPS来保证站点安全. 原文: IS ...

  8. Google的PageRank及其Map-reduce应用（日志五）

    上一篇:Hadoop的安装(日志四) 1,算法的原理解释: 如下图所示,G就是传说中的谷歌矩阵,这个矩阵是n*n型号的,n表示共计有n个网页. 如矩阵中所示: 11位置处的元素,是表示第一个网页指向的 ...

  9. [刷题]算法竞赛入门经典(第2版) 5-8/UVa230 - Borrowers

    //又开学啦,不知不觉成为大二的老人了...时间过得好快啊,感觉好颓废... 题意:建立一个借书/归还系统.有借.还.把还的书插到书架上这三个指令. 代码:(Accepted, 0ms) //UVa2 ...

  10. Redis开启远程登录连接。

    今天使用jedis客户端api连接远程连接redis的时候,一直报错,如下: redis.clients.jedis.exceptions.JedisConnectionException: java ...