<!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. [转]DevExpress GridControl 关于使用CardView的一点小结

    最近项目里需要显示商品的一系列图片,打算用CardView来显示,由于第一次使用,遇到许多问题,发现网上这方面的资源很少,所以把自己的一点点实际经验小结一下,供自己和大家以后参考. 1.选择CardV ...

  2. 安卓Native和H5页面进行交互

    安卓Native和H5页面进行交互 1.H5页面调用安卓Native界面 1)通过给webView添加JsInterface,安卓提供接口,让H5来进行调用    a)安卓写一个类,里面的方法需要用通 ...

  3. 微软的STRIDE模型

    微软的STRIDE模型: https://msdn.microsoft.com/en-us/library/ee823878(v=cs.20).aspx Spoofing identity. An e ...

  4. mac终端ssh连接服务器 空闲的时候 连接断开

    ssh_config详解(MAC OSX) 方法1:MAC客户端配置 配置“/etc/ssh/ssh_config”文件 “/etc/ssh/ssh_config” 文件是OpenSSH系统范围的配置 ...

  5. 简单XSS跨站脚本攻击实验

    原理:恶意Web用户将代码植入到提供给其它用户使用的页面中,如果程序没有经过过滤或者过滤敏感字符不严密就直接输出或者写入数据库.合法用户在访问这些页面的时候,程序将数据库里面的信息输出,这些恶意代码就 ...

  6. SCP“免密” 远程COPY较多文件

    一.linux脚本实现自动输入密码 使用Linux的程序员对输入密码这个举动一定不陌生,在Linux下对用户有严格的权限限制,干很多事情越过了权限就得输入密码,比如使用超级用户执行命令,又比如ftp. ...

  7. Failed to read artifact descriptor for xxx:jar 的Maven项目jar包依赖配置的问题解决

    在开发的过程中,尤其是新手,我们经常遇到Maven下载依赖jar包的问题,也就是遇到“Failed to read artifact descriptor for xxx:jar”的错误. 对于这种非 ...

  8. AOJ/堆与动态规划习题集

    ALDS1_9_A-CompleteBinaryTree. Codes: //#define LOCAL #include <cstdio> int parent(int i) { ret ...

  9. 今天打补丁出问题了，害得我组长被扣了1k奖金。

    今天是第三次给mxdw打补丁和打包,外加公司高管说有一个东西必须要今天之内搞定外放. 我当时问策划为什么这么着急?策划说大佬决定的(这种做事方式真的很不习惯).我等屁民加班加点的搞事情,把功能搞出去了 ...

  10. javascript 中 with 的使用

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object ...