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. 读书笔记---HTML5实战 MARCO CASARIO（前六章）

    1:行内元素转化为块级元素①display②position③float; 2:语义化; 3:微数据itemscope/itemprop/itemtype; 4:新表单元素,form外的表单元素可以用 ...

  2. 深入浅出javascript学习笔记

    弱类型的隐式转换: 32 + 32 // 64 "32" + 32 // "3232" "32" – 32 // 0 巧用+/-规则转换类型 ...

  3. 究竟谁在绑架中国的4G政策?

    2009年中国正式发放3G牌照以来,尽管在开始阶段受到了应用不足的困扰,但是随着智 能手机的迅速推广,3G移动通信也开始在中国得到了飞速的发展.就在消费者以及市场 逐步接受并广泛应用该技术之际,4G通 ...

  4. Go语言Context（设计及分析）

    context简单概述: Go服务器的每个请求都有自己的goroutine,而有的请求为了提高性能,会经常启动额外的goroutine处理请求,当该请求被取消或超时,该请求上的所有goroutines ...

  5. consistent.go 源码阅读

    ) > len(c.circle) {         hashes = nil     }     for k := range c.circle {         hashes = app ...

  6. CentOS7 通过YUM安装MySQL5.7

    1.进入到要存放安装包的位置 cd /home/lnmp 2.查看系统中是否已安装 MySQL 服务,以下提供两种方式: rpm -qa | grep mysql yum list installed ...

  7. kmspico_setup.exe运行提示系统资源不足，无法完成请求的服务

    在使用KMSpico激活office时,windows下运行exe会提示系统资源不足,无法完成请求的服务. 我的解决方法是:卸载电脑上的wps...

  8. Github泄露扫描系统

    Github leaked patrol Github leaked patrol为一款github泄露巡航工具: 提供了WEB管理端,后台数据库支持SQLITE3.MYSQL和POSTGRES 双引 ...

  9. Postman-----将 A 请求中 response Body 中的参数值传入到下一个请求 B 的 request body 中作为参数发送请求

    问题:将A接口中response body的"id"传入到B接口的request body中. 解决办法: 1.在A接口的test中设置环境变量. 代码:var data = JS ...

  10. Django基础四<二>(OneToMany和 ManyToMany,ModelForm)

    上一篇博文是关于setting.py文件数据库的配置以及model与数据库表关系,实现了通过操作BlogUser,把BlogUser的信息存入后台数据库中.实际开发中有许多东西是相互联系的,除了数据的 ...