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. An internal error occurred during: &quot;J2EE Component Mapping Update&quot;.

    1.错误描写叙述 An internal error occurred during: "J2EE Component Mapping Update". java.lang.Nul ...

  2. Weka学习之预处理连接MySql（二）

    载入数据 (一)打开文件 (二) 打开url (三) 打开数据库 (四)从一些数据生成器(DataGenerators)中生成人造数据    这篇主要写(三)中的连接mySql          网上 ...

  3. datatable 常用参数

    DataTables(http://www.datatables.net/)应该是我到目前为止见过的,功能最强大的表格解决方案(当然,不计算其它整套框架中的table控件在内). 先把它主页上写的特性 ...

  4. 【转】python测试开发面试题

    出处:http://my.oschina.net/u/1433482/blog/467954?fromerr=WrfxL2Kw 试卷时间 60分钟,请不要在试卷上作答,用A4纸做答题纸作答. 一,中文 ...

  5. bzoj3992【SDOI2015】序列统计

    3992: [SDOI2015]序列统计 Time Limit: 30 Sec  Memory Limit: 128 MB Submit: 673  Solved: 327 [Submit][Stat ...

  6. WPF 员工卡条形码

    大家都知道条形码(Barcode)是一种可以由机器识别的特殊编码,在生产.生活中也常常会见到并使用它.条形码的类型和种类很多感兴趣的朋友可以详细了解一下.其中Code 39 可以说是一种最为常见并广泛 ...

  7. 公告板shader

    Shader "Custom/LightPoint" { Properties { _MainTex ("Main Tex", 2D) = "whit ...

  8. centos7.0 安转apache2.4

    安装apache2.4的需要安转apr和apr-util 包 APR和APR-util的下载地址 http://apache.fayea.com//apr/apr-1.6.2.tar.gzhttp:/ ...

  9. spring bean的scope

    scope用来声明容器中的对象所应该处的限定场景或者说该对象的存活时间,即容器在对象进入其相应的scope之前,生成并装配这些对象,在该对象不再处于这些scope的限定之后,容器通常会销毁这些对象. ...

  10. linux c编程：非阻塞I/O

    通常来说,从普通文件读数据,无论你是采用 fscanf,fgets 也好,read 也好,一定会在有限的时间内返回.但是如果你从设备,比如终端(标准输入设备)读数据,只要没有遇到换行符(‘\n’),r ...