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. iOS swift 给MBProgressHUD添加分类

    MBProgressHUD在开发中经常会用到,今天把MBProgressHUD的方法拓展了一下,更加方便使用 1.可以实现gif图片的展示,使用时请替换test.gif 2.可以控制是否允许交互,如果 ...

  2. Ocelot --API网关简单使用

    最近几个月一直在忙一个项目(感觉像是与世隔绝了),本来想好的是要写一些asp.net core 的一些简单使用上东西,也就放下了. 好在忙完了,也就重新开始写吧.写点什么呢?网上也有不少dotnet ...

  3. PathInfo模式的支持

    pathinfo,一种伪静态的用法, 1.让 Apache 支持 PathInfo 配置的 Apache 版本 : 2.2.13 在配置文件中加入 <Files *.php> Accept ...

  4. unittest 结合 ddt

    数据驱动测试ddt,使用的重点: 1.@ddt.ddt2.@ddt.data(*zip(range(10),range(10,20)))       注意一定要带* 3.@ddt.unpack # c ...

  5. 低秩近似 low-rank approximation

  6. 洛谷 4035 [JSOI2008]球形空间产生器

    题目戳这里 一句话题意 给你 n+1 个 n 维点,需要你求出这个n维球的球心.(n<=10) Solution 这个题目N维的话确实不好想,反正三维就已经把我搞懵了,所以只好拿二维类比. 首先 ...

  7. Django之stark组件2

    action批量处理功能 用户可以自定义批量处理功能,但是默认的有批量删除功能. ***思路*** 1,定义一个列表用来装action的类名并extend用户自定义列表 2.循环该列表获取到函数名(用 ...

  8. Linux环境安装Nginx详细步骤

    1.yum解决编译nginx所需的依赖包,之后你的nginx就不会报错了yum install gcc patch libffi-devel python-devel  zlib-devel bzip ...

  9. openstack 官方镜像qcow2 下载和修改密码

    下载地址: CentOS6:http://cloud.centos.org/centos/6/images/ CentOS7:http://cloud.centos.org/centos/7/imag ...

  10. RockerMQ connect to<:10009>fail

    producer端发送报错 com.alibaba.rocketmq.client.exception.MQClientException: Send [] times, still failed, ...