3D变换和动画

  1. 建立3D空间，transform-style： preserve-3d
  2. perspective： 100px; 景深
  3. perspective-origin：center center -180px;  景深基点
  4. transform新增函数如下：
    • rotateX();
    • rotateY();
    • rotateZ();
    • translateZ();
    • scaleZ();
  5. 3d动画demo，只支持Webkit内核，可自行运行查看效果 
    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5.     <title>无标题文档</title>
    6.     <style>
    7.         .wrap { width: 100px; height: 100px; -webkit-perspective: 200px; border: 5px solid pink; padding: 100px; margin: 200px auto 0; -webkit-transform: scale(2);}
    8.         #box {width: 100px; height: 100px;  position: relative; text-align: center; line-height: 100px; -webkit-transform-style: preserve-3d; transition: 3s; -webkit-transform-origin: center center -50px;}
    9.         #box div {width: 100px; height: 100px; position: absolute; font-size: 50px; color: #FFF;}
    10.         #box div:nth-of-type(1) {background-color: #F90; left: 0px; top: 0px;}
    11.         #box div:nth-of-type(2) {background-color: #E08; left: 0px; top: -100px; -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg);}
    12.         #box div:nth-of-type(3) {background-color: #A01; left: -100px; top: 0px; -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg);}
    13.         #box div:nth-of-type(4) {background-color: #CC0; left: 100px; top: 0px; -webkit-transform-origin: left; -webkit-transform: rotateY(90deg);}
    14.         #box div:nth-of-type(5) {background-color: #D34; left: 0px; top: 100px; -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg);}
    15.         #box div:nth-of-type(6) {background-color: #000; left: 0px; top: 0px; -webkit-transform: translateZ(-100px) rotateX(180deg);}
    16.         .wrap:hover  #box{-webkit-transform: rotateX(360deg);}
    17.     </style>
    18.     <script>
    19.         window.onload = function() {
    20.             var oBox = document.getElementById("box");
    21.             oBox.style.WebkitTransform = "rotateX(360deg)";
    22.             addEnd(oBox, end1);
    23.  
    24.             function end1() {
    25.                 addEnd(oBox, end2);
    26.                 oBox.style.WebkitTransform = "rotateX(0deg)";
    27.             }
    28.  
    29.             function end2() {
    30.                 addEnd(oBox, end3);
    31.                 oBox.style.WebkitTransform = "rotateY(360deg)";
    32.             }
    33.  
    34.             function end3() {
    35.                 oBox.style.WebkitTransform = "rotateY(0deg)";
    36.             }
    37.  
    38.             function addEnd(obj, fn) {
    39.                 obj.addEventListener('WebkitTransitionEnd', fn, false);
    40.                 obj.addEventListener('transitionend', fn, false);
    41.             }
    42.  
    43.             function removeEnd(obj, fn) {
    44.                 obj.removeEventListener('WebkitTransitionEnd', fn, false);
    45.                 obj.removeEventListener('transitionend', fn, false);
    46.             }
    47.         };
    48.     </script>
    49. </head>
    50. <body>
    51.     <div class="wrap">
    52.         <div id="box">
    53.             <div>1</div>
    54.             <div>2</div>
    55.             <div>3</div>
    56.             <div>4</div>
    57.             <div>5</div>
    58.             <div>6</div>
    59.         </div>
    60.     </div>
    61. </body>
    62. </html>

css3 3D变换和动画的更多相关文章

  1. css3 3d变换和动画——回顾

    1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现. 语法:transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现. p ...

  2. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

  3. CSS3 3D变换实例 滚动的正方体

    笔记: 2D变换 transform 位移   translateX() translateY()  简写:translate(X值,Y值)  正值向右,负值向左 旋转 rotate()  rotat ...

  4. css3 3d效果及动画学习

    css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...

  5. jQuery/CSS3 3D焦点图动画

    在线演示 本地下载

  6. CSS3 3D折叠展开动画菜单

    在线演示 本地下载

  7. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  8. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  9. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

随机推荐

  1. Python md5 sha1 的使用

    版本: Python 2.7 说明: Python 内置的 hashlib 模块中有 md5 和 sha1 加密方法,可以直接使用. md5加密 import hashlib data = 'This ...

  2. WebService传递XML数据 C#DataSet操作XML 解析WebService返回的XML数据

    Webservice传递的数据只能是序列化的数据,典型的就是xml数据.   /// <summary>         /// 通过用户名和密码 返回下行数据         /// & ...

  3. java获得系统当前日期

    package com.web.test; import java.text.ParseException; import java.text.SimpleDateFormat; import jav ...

  4. java保留两位小数的方法

    01.import java.math.BigDecimal; 02.import java.text.DecimalFormat; 03.import java.text.NumberFormat; ...

  5. HDU1276（士兵队列训练模拟与链表）

    HDU1276 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descripti ...

  6. 判断鼠标从哪个方向进入--jQuery

    转载自:http://sentsin.com/web/112.html $("#wrap").bind("mouseenter mouseleave",func ...

  7. 给 chorme Developer Tool F12 开发者工具.加入更酷的代码着色

    地址:https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme 默认样式 替换目录为: mac ~/Library/App ...

  8. matplotlib绘制精美的图表（这是教程哦）

    http://sebug.net/paper/books/scipydoc/matplotlib_intro.html

  9. Android调用Asp.net Web Service示例

    WebService代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  10. POJ3026 Borg Maze(最小生成树)

    题目链接. 题目大意: 任意两点(点表示字母)可以连线,求使所有点连通,且权值和最小. 分析: 第一感觉使3维的BFS.但写着写着,发现不对. 应当用最小生成树解法.把每个字母(即A,或S)看成一个结 ...