<!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. C# 调用C++dll出现的问题。

    问题描述: 对 PInvoke 函数“winform应用!winform应用.Form1::add”的调用导致堆栈不对称.原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配.请检查 PIn ...

  2. python版本与编码的区别

    主要编码介绍 python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ascill) ASCII(American Standard Code for Information Inte ...

  3. C#网络程序设计(3)网络传输编程之TCP编程

        网络传输编程指基于各种网络协议进行编程,包括TCP编程,UDP编程,P2P编程.本节介绍TCP编程.     (1)TCP简介: TCP是TCP/IP体系中最重要的传输层协议,它提供全双工和可 ...

  4. MATLAB下跑Faster-RCNN+ZF实验时如何编译自己需要的external文件

    本篇文章主讲这篇博客中的(http://blog.csdn.net/sinat_30071459/article/details/50546891)的这个部分,如图所示 注:截图来自 小咸鱼_ 的博客 ...

  5. bzoj4800 [Ceoi2015]Ice Hockey World Championship

    Description 有n个物品,m块钱,给定每个物品的价格,求买物品的方案数. Input 第一行两个数n,m代表物品数量及钱数 第二行n个数,代表每个物品的价格 n<=40,m<=1 ...

  6. JavaScript动画1-速度动画

    动画实际上就是在一定时间内,改变一个元素的某些属性. 这里简单实现一个JavaScript运动的框架.主要包括: 速度动画(改变left.right.width.height.opacity) 缓冲运 ...

  7. express4.x的使用

    ①.安装 npm install -g  express   ②.创建应用 express [目录] 会在目录下生成 node_modules, 存放所有的项目依赖库.(每个项目管理自己的依赖,与Ma ...

  8. 在android中，如何去掉webview读取网页后点击网页上的按钮出现的方框

    参考:http://blog.sina.com.cn/s/blog_64056edc0100xt3l.html <style type="text/css"> .bor ...

  9. 宝爷Debug小记——Cocos2d-x（3.13之前的版本）底层BUG导致Spine渲染花屏

    最近在工作中碰到不少棘手的BUG,其中的一个是Spine骨骼的渲染花屏,在战斗中派发出大量士兵之后有概率出现花屏闪烁(如下图所示),这种莫名奇妙且难以重现的BUG最为蛋疼.   前段时间为了提高Spi ...

  10. MySQL开发总结(有点长..耐心看)

    一.理解MySQL基本概念 1.MySQL软件:MySQL实际上就是一软件,是一工具,是关系型数据库管理系统软件 2.MySQL数据库:就是按照数据结构来组织.存储和管理数据的仓库 3.MySQL数据 ...