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. 《TomCat与Java Web开发技术详解》（第二版） 第八章节的学习总结 -- 访问mysql

    终于学到如何访问Mysql了 1. 可以看看此章节提供的sql脚本,以后可以照着写了.此外,对于Mysql如何使用,最好的地方就是其官网介绍了.http://dev.mysql.com/doc/ref ...

  2. nginx反向代理带路径访问问题

    nginx的配置为192.168.0.219:80分别映射到upstream组192.168.0.55:8080和192.168.0.206:8080,那如何配置做到访问192.168.0.219:8 ...

  3. postman 测试API - 获取/调用 token

    1.使用全局变量保存token 2.再调用 参考文章 http://www.jianshu.com/p/13c8017bb5c8 https://testerhome.com/topics/6555

  4. resin 4.0 项目的配置

    前一篇我们了解了resin中配置数据源,依照不同项目的要求我们进行数据源的配置,如多个项目共享多个数据源,一个项目配置多个数据源,以下我们来看看项目的部署方式: 1.在一个host(虚拟主机)下配置一 ...

  5. angular选择器功能

    1.$event对象    $event对象其实就是潜在的jQuery事件对象,通过$event.currentTarget获取当前元素,通过$event.target获取当前元素的子元素. 例如: ...

  6. Lumen开发：lumen源码解读之初始化(4)——服务提供(ServiceProviders)与路由(Routes)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前面讲了singleton和Middleware,现在来继续讲ServiceProviders和Routes,还是看起始文件bootstrap/a ...

  7. 高仿微信app （含有发红包，聊天，消息等）用到 Rxjava+Retrofit+MVP+Glide技术

    https://github.com/GitLqr/LQRWeChat 技术很牛,可以看看

  8. SDOI 2016 Round1 Day1

    储能表 /* 引自zyz大佬的数学思想 */ #include<cstdio> #include<iostream> using namespace std; typedef ...

  9. 【python】-- RabbitMQ Publish\Subscribe(消息发布\订阅)

    RabbitMQ RabbitMQ Publish\Subscribe(消息发布\订阅) 1对1的消息发送和接收,即消息只能发送到指定的queue里,但这样使用有些局限性,有些时候你想让你的消息被所有 ...

  10. genymotion device manager列表没有

    1.第一种原因:链接Genymotion官网的网络超时,无法加载Genymotion device列表,解决办法百度一下:配置Genymotion代理服务器,联网下载 2.第二种可能:检查是否正确安装 ...