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. sql server 死锁排查

    记得以前客户在使用软件时,有偶发出现死锁问题,因为发生的时间不确定,不好做问题的重现,当时解决问题有点棘手了. 现总结下查看死锁的常用二种方式: 第一种是图形化监听: sqlserver --> ...

  2. Hibernate中cascade作用

    Hibernate中cascade作用 只有“关系标记”才有cascade属性: 一个操作因级联cascade可能触发多个关联操作.前一个操作叫“主控操作”,后一个操作叫“关联操作”. cascade ...

  3. sed、awk——运维必须掌握的两个工具

    今天主要跟大家介绍2个非常霸道的工具,sed和awk,本篇文章将介绍这两个工具在日常运维中的常用用法,工作中这两个工具要掌握好了在结合一些管道命令.正则表达式,日常处理事务简直666啦! l Sed ...

  4. 【BZOJ 2673】[Wf2011]Chips Challenge

    题目大意: 传送门 $n*n$的棋盘,有一些位置可以放棋子,有一些已经放了棋子,有一些什么都没有,也不能放,要求放置以后满足:第i行和第i列的棋子数相同,同时每行的棋子数占总数比例小于$\frac{A ...

  5. BZOJ_3110_[Zjoi2013]K大数查询_整体二分+树状数组

    BZOJ_3110_[Zjoi2013]K大数查询_整体二分+树状数组 Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位 ...

  6. iOS之LLDB常用调试命令

    LLDB是个开源的内置于XCode的调试工具,这里来理一理常用用法.lldb对于命令的简称,是头部匹配方式,只要不混淆,你可以随意简称某个命令.结果为在xcode下验证所得,可能与其它平台有所误差. ...

  7. golang从简单的即时聊天来看架构演变

    前言 俗话说的好,架构从来都不是一蹴而就的,没有什么架构一开始设计就是最终版本,其中需要经过很多步骤的变化,今天我们就从一个最简单的例子来看看,究竟架构这个东西是怎么变的. 我将从一个最简单的聊天室的 ...

  8. 用Python学分析 - 正态分布

    正态分布(Normal Distribution) 1.正态分布是一种连续分布,其函数可以在实线上的任何地方取值. 2.正态分布由两个参数描述:分布的平均值μ和方差σ2 . 3.正态分布的取值可以从负 ...

  9. spring mvc+redis实现微信小程序登录

    本文将详细的介绍微信小程序的登录流程以及在ssm框架下如何实现小程序用户登录 登录流程概要 主要的登录流程可以参考官方提供的一张流程图: 1.微信前台页面: 在微信版本更新之后,提高了安全机制,我们需 ...

  10. Mysql存储过程历史表备份

    应用背景 SCADA采集系统需要将实时数据存入历史表.问题1:如何更简单的添加历史数据?2.海量历史数据,比如年数据,如何快速筛选 画曲线? 利用mysql的事件,每小时存一次采集数据: 每月备份历史 ...