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内核，可自行运行查看效果 
    <!DOCTYPE HTML>
    
<html>
    
<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>无标题文档</title>
    
    <style>
    
        .wrap { width: 100px; height: 100px; -webkit-perspective: 200px; border: 5px solid pink; padding: 100px; margin: 200px auto 0; -webkit-transform: scale(2);}
    
        #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;}
    
        #box div {width: 100px; height: 100px; position: absolute; font-size: 50px; color: #FFF;}
    
        #box div:nth-of-type(1) {background-color: #F90; left: 0px; top: 0px;}
    
        #box div:nth-of-type(2) {background-color: #E08; left: 0px; top: -100px; -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg);}
    
        #box div:nth-of-type(3) {background-color: #A01; left: -100px; top: 0px; -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg);}
    
        #box div:nth-of-type(4) {background-color: #CC0; left: 100px; top: 0px; -webkit-transform-origin: left; -webkit-transform: rotateY(90deg);}
    
        #box div:nth-of-type(5) {background-color: #D34; left: 0px; top: 100px; -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg);}
    
        #box div:nth-of-type(6) {background-color: #000; left: 0px; top: 0px; -webkit-transform: translateZ(-100px) rotateX(180deg);}
    
        .wrap:hover  #box{-webkit-transform: rotateX(360deg);}
    
    </style>
    
    <script>
    
        window.onload = function() {
    
            var oBox = document.getElementById("box");
    
            oBox.style.WebkitTransform = "rotateX(360deg)";
    
            addEnd(oBox, end1);

            function end1() {
    
                addEnd(oBox, end2);
    
                oBox.style.WebkitTransform = "rotateX(0deg)";
    
            }

            function end2() {
    
                addEnd(oBox, end3);
    
                oBox.style.WebkitTransform = "rotateY(360deg)";
    
            }

            function end3() {
    
                oBox.style.WebkitTransform = "rotateY(0deg)";
    
            }

            function addEnd(obj, fn) {
    
                obj.addEventListener('WebkitTransitionEnd', fn, false);
    
                obj.addEventListener('transitionend', fn, false);
    
            }

            function removeEnd(obj, fn) {
    
                obj.removeEventListener('WebkitTransitionEnd', fn, false);
    
                obj.removeEventListener('transitionend', fn, false);
    
            }
    
        };
    
    </script>
    
</head>
    
<body>
    
    <div class="wrap">
    
        <div id="box">
    
            <div>1</div>
    
            <div>2</div>
    
            <div>3</div>
    
            <div>4</div>
    
            <div>5</div>
    
            <div>6</div>
    
        </div>
    
    </div>
    
</body>
    
</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. jquery元素查找方法

    $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div&q ...

  2. 栈的讲解 和 栈的生长方向 源代码技巧分析，简直没SEI 啦

    函数的局部变量,都是存放在"栈"里面,栈的英文是:STACK.STACK的大小,我们可以在stm32的启动文件里面设置,以战舰stm32开发板为例,在startup_stm32f1 ...

  3. 30 个 Python 语言的特点技巧

    1   介绍 从我开始学习Python时我就决定维护一个经常使用的“窍门”列表.不论何时当我看到一段让我觉得“酷,这样也行!”的代码时(在一个例子中.在StackOverflow.在开源码软件中,等等 ...

  4. springboot工程读取配置文件application.yml的写法

    现在流行springboot框架的项目,里面的默认配置文件为application.yml,我们怎样读取这个配置文件呢? 先贴上我得配置文件吧 目录结构 里面内容 1 写读取配置文件的工具类 @Con ...

  5. html5 中常用的标签和属性

    标签: <blockquote> 标签定义摘自另一个源的块引用. <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来, ...

  6. Scala开启之旅

    嘿嘿,公司最近需要测试SPARK性能,赶上了.. 那LUA之后,SCALA也简单看看,,, 其实,我三月时买了本129元的SPARK的书,,全国只那一本哈. package com.hengheng. ...

  7. [log4j] 可用案例

    可用的 log4j 配置, log4j.properties log = /Users/grs/Documents/log4j log4j.rootLogger = DEBUG, FILEROLING ...

  8. war文件

    原文地址:http://blog.sina.com.cn/s/blog_4cbc6fdd0100fojv.html jar包和war包的区别:war是一个web模块,其中需要包括WEB-INF,是可以 ...

  9. springmvc对jsonp的支持

    在与前端开发人员合作过程中,经常遇到跨域名访问的问题,通常我们是通过jsonp调用方式来解决.jsop百科:http://baike.baidu.com/link?url=JKlwoETqx2uuKe ...

  10. 解决从VIM复制出来的代码格式错乱或对齐的问题

    这篇文适合给使用VIM的小鸟看,不太适合老鸟 之前有一个问题就是只要是从VIM复制出来的代码,无论是放到CSDN还是GITHUB上面都会变得非常难看. 在VIM里面你看着以为对齐了,实际没有.先说一下 ...