<!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. STM32定时器

    /*****************************************************************************初始化定时器**************** ...

  2. git的使用及常用命令（二）

    一,把文件放在版本库中 执行  git add XXX文件名 在执行 git commit -m ‘提交注释' 查看状态 git status 如果没有改变文件,nothing to comment ...

  3. 数据结构与算法(c++)——跳跃表(skip list)

    今天要介绍一个这样的数据结构: 单向链接 有序保存 支持添加.删除和检索操作 链表的元素查询接近线性时间 ——跳跃表 Skip List 一.普通链表 对于普通链接来说,越靠前的节点检索的时间花费越低 ...

  4. Python、PyCharm的安装及使用方法（Mac版）

    上周跟朋友喝咖啡时聊起我想学Python,她恰好也有这个打算,顺便推荐了一本书<编程小白的第1本Python入门书>,我推送到Kindle后,随手翻看了下,用语平实,简洁易懂. 之前在R语 ...

  5. js表白心形特效

    好久没有仔细钻研技术了,闲下来借鉴一下做出一些效果 友情链接: http://tiepeng.applinzi.com/love_you/ ;;background:#ffe;font-size:12 ...

  6. python-day2 字典

    ===========字典功能=============> dict.clear() -->清空字典 dict.keys() -->获取所有key dict.values() --& ...

  7. LeetCode5. Longest Palindromic Substring 最长回文子串 4种方法

    题目链接:https://leetcode.com/problems/longest-palindromic-substring/ 题意很简单,就是求一个字符串得最长子串,这里的子串指连续的. 本文给 ...

  8. 最新的chart 聊天功能（ webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7）

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  9. Charles安装破解及使用

    摘要 在发开过程中,追踪请求和监控请求与返回数据是我们经常会需要的一个需求,在Mac端,Charles是一款非常易用的抓包工具. Mac端的优秀抓包工具--Charles使用 一.简介 Charles ...

  10. 【JAVAWEB学习笔记】17_jsp

    动态页面技术(JSP/EL/JSTL) 学习目标 案例:完成商品的列表的展示 一.JSP技术 1．jsp脚本和注释 jsp脚本: 1)<%java代码%> ----- 内部的java代码翻 ...