<!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. FreeSWITCH 安装配置的 各种坑, 填坑

    个人安装环境: OS:CentOS6.7 64位 FreeSWITCH Ver:1.6.17 一. 编译出错 安装 之前, 最好 先安装 这几个东西(如果有, 请忽略): yasm (有nasm的话 ...

  2. 设计模式（1）单例模式（Singleton）

    设计模式(0)简单工厂模式 源码地址 0 单例模式简介 0.0 单例模式定义 单例模式是GOF二十三中经典设计模式的简单常用的一种设计模式,单例模式的基本结构需满足以下要求. 单例模式的核心结构只有一 ...

  3. XISE菜刀V21.0 官网版 XISE菜刀VIP破解版 XISE官网

    诠释: 1. 破解VIP登陆限制 2.去后门 (自查) 下载地址 : https://pan.baidu.com/s/1skUqlGD https://pan点baidu点com/s/1skUqlGD ...

  4. Ubuntu16.04安装opencv for python/c++

    Ubuntu16.04安装opencv for python/c++ 网上关于opencv的安装已经有了不少资料,但是没有一篇资料能让我一次性安装成功,因此花费了大量时间去解决各种意外,希望这篇能给一 ...

  5. C#控制台程序使用Log4net日志组件

    1.Log4net一般都不陌生,但是在配置上不同类型的项目又不相同的地方比如C#控制台程序和C# MVCWeb项目,拿控制台项目为例   项目源码在文章底部 2.首先创建一个控制台程序,引入Log4n ...

  6. 安装hexo报错（npm WARN deprecated swig@1.4.2: This package is no longer maintained），已解决

    问题:在使用npm安装hexo时报错 $ npm install -g hexo npm WARN deprecated swig@1.4.2: This package is no longer m ...

  7. css定位 浮动 伪类 margin

    一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; ...

  8. MySQL事件调度器event的使用

    Q:假设,有一个需求,希望在某一个时刻系统调用一个begin end执行一下:十分钟以后执行一下begin end.亦或有一个需求,每个多长时间周期性执行begin end.那么这个时候该怎么办呢? ...

  9. session与cookie-----2017-05-08

    会话控制:目的是记录不同用户身份. 1.session:有实效性 特点: (1)存在在服务器 (2)每个用户都会存一份 (3)可以存储任意类型的数据 优点:安全性高 缺点:服务器压力过大 2.cook ...

  10. IOS中的绘图Quartz2D

    drawRect 方法的使用 常见图形的绘制:线条.多边形.圆 绘图状态的设置:文字颜色.线宽等 图形上下文状态的保存与恢复 图形上下文栈 Quartz 2D是一个二维绘图引擎,同时支持IOS和MAC ...