1. [代码]   
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>创建3D模型</title>
<style>
    *{padding:0;margin:0;}
    li{list-style:none;}
    body{font-size:12px;background:#fff;font-family:'Helvetica Neue',Arial,sans-serif;
-webkit-text-size-adjust: none;color:#333;}
    .box{margin:100px auto;width:500px;height:500px;border:5px solid #ddd;}
#cube{
    width:300px;height:300px;margin:100px auto;
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
}
#cube li{
display:block;position:absolute;width:298px;height:298px;font-size:120px;line-height:298px;text-align:center;border:1px solid #333;z-index:10;
 backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.front{
    -webkit-transform:rotateY(0deg) translateZ(150px);
    -moz-transform:rotateY(0deg) translateZ(150px);
    background:rgba(0,255,0,0.3);
}
.back{
    -webkit-transform:rotateY(180deg) translateZ(150px);
    -moz-transform:rotateY(180deg) translateZ(150px);
    background:rgba(255,0,0,0.3);
}
.right{
    -webkit-transform:rotateY(90deg) translateZ(150px);
    -moz-transform:rotateY(90deg) translateZ(150px);
    background:rgba(255,255,0,0.3);
}
.left{
    -webkit-transform:rotateY(-90deg) translateZ(150px);
    -moz-transform:rotateY(-90deg) translateZ(150px);
    background:rgba(10,10,10,0.3);
}
.top{
    -webkit-transform:rotateX(90deg) translateZ(150px);
    -moz-transform:rotateX(90deg) translateZ(100px);
    background:rgba(100,0,0,0.3);
}
.bottom{
    -webkit-transform:rotateX(-90deg) translateZ(150px);
    -moz-transform:rotateX(-90deg) translateZ(150px);
    background:rgba(0,255,255,0.3);
}
input[type="range"]{width:800px;}
</style>
</head>
 
<body>
<ul class="item_transform">
    <li class="mode_3d">
        <label>透　　视：</label><input type="range" id="perspective" min="1" max="10000" value="800" /> <span>800px</span>
    </li>
    <li class="mode_3d">
        <label>外容器宽：</label><input type="range" id="width" min="100" max="1000" value="300" /> <span>300px</span>
    </li>
    <li class="mode_3d">
        <label>外容器高：</label><input type="range" id="height" min="100" max="1000" value="300" /> <span>300px</span>
    </li>
    <li class="mode_3d">
        <label>水平视点：</label><input type="range" id="perspective-origin-x" min="1" max="100" value="50" /> <span>50%</span>
    </li>
    <li class="mode_3d">
        <label>垂直视点：</label><input type="range" id="perspective-origin-y" min="1" max="100" value="50" /> <span>50%</span>
    </li>
    <li class="mode_3d">
        <label>translateZ：</label><input type="range" id="translateZ" min="0" max="1000" value="10" /> <span>10px</span>
    </li>
    <li class="mode_3d"><label>rotateX：</label><input type="range" id="cube_rotateX" min="-360" max="360" value="0" /> <span>0deg</span></li>
    <li class="mode_3d"><label>rotateY：</label><input type="range" id="cube_rotateY" min="-360" max="360" value="0" /> <span>0deg</span></li>
    <li class="mode_3d"><label>rotateZ：</label><input type="range" id="cube_rotateZ" min="-360" max="360" value="0" /> <span>0deg</span></li>
     
</ul>
<div class="box" >
    <ul id="cube">
        <li class="front">1</li>
        <li class="back">2</li>
        <li class="right">3</li>
        <li class="left">4</li>
        <li class="top">5</li>
        <li class="bottom">6</li>
    </ul>
</div>
<script src="js_lib/jquery-2.0.3.js"></script> 
<script>
$(function(){
    var transformArr=[0,0,0]
    $("#perspective").on('change',function(e) {
        $("#cube").parent().css({
            "-webkit-perspective":$(this).val()+"px"
        });
        $(this).next("span").text($(this).val()+"px");
    });
    $("#width").on('change',function(e) {
       // var val=$(this).val();
        $("#cube").css({
            "border":"1px solid red",
            "width":$(this).val()+"px"
        });
        $(this).next("span").text($(this).val()+"px");
    });
    $("#height").on('change',function(e) {
       // var val=$(this).val();
        $("#cube").css({
            "border":"1px solid red",
            "height":$(this).val()+"px"
        });
        $(this).next("span").text($(this).val()+"px");
    });
    $("#perspective-origin-x").on('change',function(e) {
       // var val=$(this).val();
        $("#cube").css({
            "-webkit-perspective-origin-x":$(this).val()+"%",
            "-moz-perspective-origin-x":$(this).val()+"%"
        });flash插件
        $(this).next("span").text($(this).val()+"%");
    });http://www.huiyi8.com/flashchajian/​
    $("#perspective-origin-y").on('change',function(e) {
       // var val=$(this).val();
        $("#cube").css({
            "-webkit-perspective-origin-y":$(this).val()+"%",
            "-moz-perspective-origin-y":$(this).val()+"%"
        });
        $(this).next("span").text($(this).val()+"%");
    });
    $("#translateZ").on('change',function(e) {
       // var val=$(this).val();
        $("#cube").css({
            "-webkit-transform":"translateZ("+$(this).val()+"px)"
        });
        $(this).next("span").text($(this).val()+"px");
    });
    $("#cube_rotateX").on('change',function(){
        transformArr[0]=$(this).val();
        $("#cube").css({
            "-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
                                "rotateY("+transformArr[1]+"deg) "+
                                "rotateZ("+transformArr[2]+"deg)"
        });
        $(this).next("span").text($(this).val()+"deg");
    });
    $("#cube_rotateY").on('change',function(){
        transformArr[1]=$(this).val();
        $("#cube").css({
            "-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
                                "rotateY("+transformArr[1]+"deg) "+
                                "rotateZ("+transformArr[2]+"deg)"
        });
        $(this).next("span").text($(this).val()+"deg");
    });
    $("#cube_rotateZ").on('change',function(){
        transformArr[2]=$(this).val();
        $("#cube").css({
            "-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
                                "rotateY("+transformArr[1]+"deg) "+
                                "rotateZ("+transformArr[2]+"deg)"
        });
        $(this).next("span").text($(this).val()+"deg");
    });
});
</script>
</body>
</html>

css 动画的例子的更多相关文章

  1. 惊人的CSS和JavaScript动画logos例子

    https://codepen.io/lindell/pen/mEVgJP Stack Overflow logo是我最喜欢的logo之一,因为它非常简单,但易于识别.并且这个片段动画点击预览Stac ...

  2. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  3. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  4. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  5. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  6. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  7. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  8. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  9. 这样使用 GPU 渲染 CSS 动画（转）

    大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

随机推荐

  1. linux sublime python

    (三)配置python3编译环境 1.点击上部菜单栏Tools->Build System ->new Build System 2.点击之后,会出现一个空的配置文件,此时,往这个空配置文 ...

  2. 从零開始学Swift之Hello World进化版

    上节课,也就是昨晚啦,我们学习到从零開始学Swift之Hello World.那一节仅仅有一句代码,大家会认为不够过瘾. 那么这节课,就给大家来多点瘾货吧! 先上图! //var 代表变量的类型, s ...

  3. sublime使用技巧（2）-- 实用插件推荐【持续更新】

    1.Auto semicolon 在括号内输入分号,会自动把光标移到行尾然后再输入分号. 2.DocBlockr 补全注析格式,例如在函数上面输入/** + Enter,就会自动补全函数的注析说明. ...

  4. COM线程模型 套间概念

    COM线程模型 套间概念 1) 单线程套间.线程是COM主线程,初始化COM库的进程的第一个线程.即使从其他线程访问COM组件,也不需要手工同步,COM库已经实现了同步.寓所线程里有个消息处理循环来处 ...

  5. python 求下个月的最后一天

    [1]根据当前月求上个月.下个月的最后一天 (1)求当前月最后一天 (2)求前一个月的最后一天 (3)求下一个月的最后一天 学习示例与应用实例,代码如下: #!/usr/bin/python3 #-* ...

  6. python 学习2 测试报告

    1. py.test test_class.py  --resultlog=./log.txt 2.生成html格式 py.test test_class.py --html=./report.htm ...

  7. 最小生成树——Kruskal（克鲁斯卡尔）算法

    [0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在 理解 Kruskal(克鲁斯卡尔)算法 的idea 并用 源代码加以实现: 0.2)最小生成树的基础知识,参见 ...

  8. 嵌入式专题： S5PV210 - MPEG4编码

    我想说不台的平台,如tiny210和x210.它们的头文件是有稍微区别的. 我这个是x210下的代码.但都须要注意的是NV12T与NV12的问题,默认要求输入的图片是NV12T,经过调整之后,能够同意 ...

  9. 编辑器模式下如何实例化Prefab

    当我们在EditMode下需要用脚本批量添加prefab时,可以用 PrefabUtility.InstantiatePrefab(prefab) as GameObject; 注意:如果用GameO ...

  10. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...