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. Windows上设置Mozilla Thunderbird邮件客户端后台运行

    作者:荒原之梦 操作系统: Windows 10 Thunderbird版本: 52.6.0(32-bit) Thunderbird官网页面:https://www.mozilla.org/zh-CN ...

  2. 使用WampServer和DVWA在Windows10上搭建渗透测试环境

    前言: DVWA是一个具有脆弱性的Web测试应用,需要PHP和MySQL的环境支持.我们可以手动配置DVWA所需的运行环境,也可以使用WampServer进行搭建.WampServer是集成了Apac ...

  3. Kafka的CommitFailedException异常

    一.含义 CommitFailedException异常:位移提交失败时候抛出的异常.通常该异常被抛出时还会携带这样的一段话: Commit cannot be completed since the ...

  4. JFree图表

    ************************************************************************************* 使用JFree生成统计图片, ...

  5. 序列操作 BZOJ2962 线段树

    分析: 数据范围表示:c特别的小(c<20) 我们可以考虑nlogn*c^2的算法. 线段树维护区间信息:f[i]表示在[l,r]这段区间中选择i个数相乘的和. 因此,我们可以将区间看成一个点, ...

  6. MYSQL一键安装

    #!/bin/bash #baishuchao qq:995345781 ############################################################### ...

  7. C#多线程中的异常处理

    常规Thread中处理异常 使用Thread创建的子线程,需要在委托中捕捉,无法在上下文线程中捕捉 static void Main(string[] args) { ThreadStart thre ...

  8. FTRL(Follow The Regularized Leader)学习总结

    摘要: 1.算法概述 2.算法要点与推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 FTRL是一种适用于处理超大规模数据的,含大量稀疏特征的在线学习的 ...

  9. Spark学习之编程进阶总结(二)

    五.基于分区进行操作 基于分区对数据进行操作可以让我们避免为每个数据元素进行重复的配置工作.诸如打开数据库连接或创建随机数生成器等操作,都是我们应当尽量避免为每个元素都配置一次的工作.Spark 提供 ...

  10. 带你学习AOP框架之Aspect.Core[1]

    在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的 ...