<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{margin:0;padding:0;}

body{background: black;}

div{

    width:400px;

    height:400px;

    border:1px solid pink;

    perspective:500px;

    perspective-origin: top;

    }

ul{

    position: relative;

    transform-style: preserve-3d;

    margin:150px;

}

li{position:absolute;

    width:100px;

height:100px;

background:pink;

opacity:0.3;}

ul li:nth-child(2n){background: yellow;}

ul li:nth-child(1){

    transform:translateZ(200px);

}

ul li:nth-child(12){

    transform:translateZ(-200px);

}

ul li:nth-child(2){

    transform:rotateY(90deg)translateZ(200px);

}

ul li:nth-child(11){

    transform:rotateY(-90deg)translateZ(200px);

}

ul li:nth-child(3){

    transform:rotateY(30deg)translateZ(200px);

}

ul li:nth-child(10){

    transform:rotateY(-150deg)translateZ(200px);

}

ul li:nth-child(4){

    transform:rotateY(60deg)translateZ(200px);

}

ul li:nth-child(9){

    transform:rotateY(-120deg)translateZ(200px);

}

ul li:nth-child(5){

    transform:rotateY(120deg)translateZ(200px);

}

ul li:nth-child(8){

    transform:rotateY(-60deg)translateZ(200px);

}

ul li:nth-child(6){

    transform:rotateY(150deg)translateZ(200px);

}

ul li:nth-child(7){

    transform:rotateY(-30deg)translateZ(200px);

}

</style>

</head>

<body>

<div>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

    <li>10</li>

    <li>11</li>

    <li>12</li>

</ul>

</div>

</body>

</html>

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. HDU 2846 Trie查询

    给出若干模式串,再给出若干询问串,求每个询问串作为多少个模式串的子串出现. 如果一个串是另一个串的子串,则一定是另一个串某个前缀的后缀或者某个后缀的前缀.根据字典树的性质,将模式串的每一个后缀插入字典 ...

  2. 使用vue-cli构建多页面应用+vux（三）

    上节中,我们成功的将vue-cli改造成了多入口,既然用了上简单的脚手架,那就希望用个合适的UI组件,去搜索了几个以后,最后选择了使用vux 贴上其vux的github地址  https://gith ...

  3. Angular2.js——多个组件

    目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个.然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处.如果我们需要 ...

  4. UBIFS文件系统介绍

    1.  引言 UBIFS,Unsorted Block Image File System,无排序区块图像文件系统.它是用于固态硬盘存储设备上,并与LogFS相互竞争,作为JFFS2的后继文件系统之一 ...

  5. 利用GDB进行多线程调试

    一.多线程调试 多线程调试重要就是下面几个命令: info thread 查看当前进程的线程. thread <ID> 切换调试的线程为指定ID的线程. break file.c:100 ...

  6. Reactjs vs. Vuejs

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊,从事Web前端开发工作,2016年加入腾讯OMG广告平台产品部,喜欢研究前端技术框架. 这里要讨论的话题 ...

  7. mysql主从复制-异步复制

    一.创建复制账号:      在Master的数据库中建立一个备份帐户:每个Slave使用标准的MySQL用户名和密码连接master.      进行复制操作的用户会授予REPLICATION SL ...

  8. 1.各个浏览器内核？经常遇到的浏览器兼容性有哪些？解决办法？常用的hack技巧？

    IE: trident内核 Firefox(火狐):gecko内核 Safari(苹果):webkit内核 Opera(欧鹏):以前是presto内核,现在是Blink内核 Chrome:Blink ...

  9. 【原创】JQWidgets-TreeGrid 2、初探源码

    已知JQWidgets的TreeGrid组件依赖于jqxcore.js.jqxtreegrid.js,实际上它还依赖于jqxdatatable.js.我们先通过一个例子,来探索本次的话题. 需求: 图 ...

  10. 【JAVAWEB学习笔记】14_response

    HttpServletResponse 学习目标 案例一.完成文件下载 案例二.生成验证码(了解) 1．HttpServletResponse概述 我们在创建Servlet时会覆盖service()方 ...