css3d 测试工具

效果如图：

代码如下：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="renderer" content="webkit">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>CSS3D</title>

<style>

/* css style */

.panel {

    background: red;

    transform: rotateY(45deg);

    width:100%;

    height:100%;

    text-align: center;

    line-height: 250px;

    font-size:50px;

    color:#fff;

    font-weight: bold;

    position: relative;

    transform-style: preserve-3d;

    transition: transform 1s;

    /*

    backface-visibility: hidden;

    */

}

#divControl label{

    width:200px;

    text-align: right;

    display: inline-block;

}

#divControl span{

    width:50px;

    text-align: left;

    display: inline-block;

}

#divControl small{

    width:50px;

    text-align: left;

    display: inline-block;

}

#divInfo{

    text-align: center;

}

</style>

</head>

<body>

<h1 style="text-align: center;">CSS3D</h1>

<div style="width:250px; height:250px; margin:20px auto; border:solid 1px gray; transform: perspective(500px)">

<div id="divPanel" class="panel">CSS3D</div>

</div>

<div id="divInfo"></div>

<div id="divControl" style="text-align:center;">

<div>

<label>perspective</label>

<input type="range" max="2000" min="0" value="500" />

<span>500</span><small>px</small>

</div>

<div>

<label>rotateX</label>

<input type="range" max="360" min="0" value="0" />

<span>0</span><small>deg</small>

</div>

<div>

<label>rotateY</label>

<input type="range" max="360" min="0" value="0" />

<span>0</span><small>deg</small>

</div>

<div>

<label>rotateZ</label>

<input type="range" max="360" min="0" value="0" />

<span>0</span><small>deg</small>

</div>

<div>

<label>translateX</label>

<input type="range" max="100" min="0" value="0" />

<span>0</span><small>px</small>

</div>

<div>

<label>translateY</label>

<input type="range" max="100" min="0" value="0" />

<span>0</span><small>px</small>

</div>

<div>

<label>translateZ</label>

<input type="range" max="100" min="0" value="0" />

<span>0</span><small>px</small>

</div>

<div>

<label>scaleX</label>

<input type="range" max="5" min="0" value="1" step="0.01" />

<span>1</span><small></small>

</div>

<div>

<label>scaleY</label>

<input type="range" max="5" min="0" value="1" step="0.01" />

<span>1</span><small></small>

</div>

<div>

<label>scaleZ</label>

<input type="range" max="5" min="0" value="1" step="0.01" />

<span>1</span><small></small>

</div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

function updateCss()

{

    var str = '';

    $('#divControl div').each(function(){

        var lbl = $(this).find('label').html();

        if (lbl == 'perspective')

        {

            $('#divPanel').parent().css('perspective', $(this).find('input').val() + 'px');

        }

        else

        {

            str += lbl + '(' + $(this).find('input').val() + $(this).find('small').html() + ') ';

        }

    });

    $('#divInfo').html(str);

    $('#divPanel').css('transform', str);

}

// js script

$(function(){

    $('#divControl input[type=range]').on('input', function(){

        $(this).parent().find('span').html($(this).val());

        updateCss();

    });

    updateCss();

});

</script>

</body>

CSS3D 转换调试的更多相关文章

  1. nodejs前端接口与状态转换调试

    和UI无关的逻辑用browser 调有时不太方便,配置 node 命令行调试环境方法如下: cnpm install @babel/core @babel/cli @babel/register @b ...

  2. 推荐超实用的8款jQuery插件

    这里有8款超实用的jQuery插件供大家参考使用,除了jQuery特效的详细使用方法以外,我们还有在线演示和下载及教程,希望对大家有所帮助! 超棒的视差效果jQuery插件 - FractionSli ...

  3. php的memcache安装，在window10下面

    1.memcached-win对应得安装包 2.解压,可以放到任意目录,以管理员身份打开cmd 3.在安装的目录下面,执行如下命令 memcached.exe -d install 安装 Memcac ...

  4. PHP7函数大全（4553个函数）

    转载来自: http://www.infocool.net/kb/PHP/201607/168683.html a 函数 说明 abs 绝对值 acos 反余弦 acosh 反双曲余弦 addcsla ...

  5. Linux下不同服务器间数据传输--转载

    因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...

  6. Linux下不同服务器间数据传输

    因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...

  7. linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)(zz)

    linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl) 分类: linux2011-10-10 13:21 8773人阅读 评论(1) 收藏 举 ...

  8. PHP操作Memcache基本函数的方法

    Memcache基本函数. Memcache ― Memcache类 Memcache::add ― 增加一个条目到缓存服务器 Memcache::addServer ― 向连接池中添加一个memca ...

  9. linux下常用文件传输命令 （转）

    因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...

随机推荐

  1. [ Java面试题 ]泛型篇

    1.Java中的泛型是什么 ? 使用泛型的好处是什么? 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数. 好处: 1.类型安全,提供编译期间的类 ...

  2. 你不知道的JavaScript--Item9 call(),apply(),bind()与回调

    1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...

  3. spawn-fcgi运行fcgiwrap

    http://linuxjcq.blog.51cto.com/3042600/718002 标签:休闲 spawn-fcgi fcgiwarp fcgi 职场 原创作品,允许转载,转载时请务必以超链接 ...

  4. html总结01

    lesson01~lesson02基础 <!DOCTYPE html> <html lang="en"> <!-- ################# ...

  5. 那些年我们一起清除过的浮动float与clearfix

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  6. HashMap浅入理解

    HashMap不能保证元素的顺序,HashMap能够将键设为null,也可以将值设为null,与之对应的是Hashtable,(注意大小写:不是HashTable),Hashtable不能将键和值设为 ...

  7. 如何使用Docker部署一个Go Web应用程序

    熟悉Docker如何提升你在构建.测试并部署Go Web应用程序的方式,并且理解如何使用Semaphore来持续部署. 简介 大多数情况下Go应用程序被编译成单个二进制文件,web应用程序则会包括模版 ...

  8. bzoj 2500 幸福的道路 树上直径+set

    首先明确:树上任意一点的最长路径一定是直径的某一端点. 所以先找出直径,求出最长路径,然后再求波动值<=m的最长区间 #include<cstdio> #include<cst ...

  9. Linux文件系统选择

    通过综合使用多种标准文件系统Benchmarks对Ext3, Ext4, Reiserfs, XFS, JFS, Reiser4的性能测试对比,对不同应用选择合适的文件系统给出以下方案,供大家参考.文 ...

  10. XMR挖矿教程

    XMR挖矿教程 XMR介绍 门罗币(Monero,代号XMR)是一个创建于2014年4月开源加密货币,它着重于隐私.分权和可扩展性.与自比特币衍生的许多加密货币不同,Monero基于CryptoNot ...