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. java基础之【堆、栈、方法区】结构图

    |--数组实例化过程 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHViaWFvXzA2MTg=/font/5a6L5L2T/fontsize/400/ ...

  2. 【BZOJ3779】重组病毒 LCT+DFS序

    [BZOJ3779]重组病毒 Description 黑客们通过对已有的病毒反编译,将许多不同的病毒重组,并重新编译出了新型的重组病毒.这种病毒的繁殖和变异能力极强.为了阻止这种病毒传播,某安全机构策 ...

  3. vscode 全局安装和配置 stylelint 像 webstorm 等 ide 一样来检查项目

    商店里安装完插件以后全局安装或者在项目中(记得加--save-dev)安装配置: npm install stylelint-config-recommended -g 然后在vscode setti ...

  4. CMD命令获取电脑所有连接过的WiFi密码

    cmd中输入命令:for /f "skip=9 tokens=1,2 delims=:" %i in ('netsh wlan show profiles') do  @echo ...

  5. 九度OJ 1196：成绩排序 （排序）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4339 解决:1476 题目描述: 用一维数组存储学号和成绩,然后,按成绩排序输出. 输入: 输入第一行包括一个整数N(1<=N< ...

  6. SDOI2017第一轮

    本蒟蒻表示终于$AC$了$SDOI2017\text{第一轮}$! 兴奋! 附上各个题的题解: $DAT1$: $T1$: BZOJ4816: [Sdoi2017]数字表格 $T2$: BZOJ481 ...

  7. java_Ninja实战过程

    使用Ninja马上两年了,之前多多少少的都是跟着项目模仿着写,今年上半年准备从一个小项目开始从始至终走一遍; 首先官网:http://www.ninjaframework.org; github: h ...

  8. 如何用excel urldecode解码把url编码转为汉字?

    统计分析可以反映出网站运营的情况,并根据实际作出相应的调整,是站长必需的基础技能.ytkah感觉最好用的是谷歌统计,里面有个搜索关键词及对应受访页面,这个功能对优化用处很大,但大家都知道访问不太顺畅. ...

  9. Call method 的使用

    SAP学习日志---Call method 的使用 以及常见错误 转载▼   可以通过以下方法 call method 1. 进入全局类中 找到方法,拖到程序中 2. 使用pattern 中的 AAB ...

  10. VMware下所有的系统网卡启动不起来

    昨天新装了一台Linux,装好之后网络起不来,搞了半天也没弄好,总是报错: Failed to start LSB: Bring up/down networking.... 我以为是我的设置出了问题 ...