CSS3D 转换调试
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 转换调试的更多相关文章
- nodejs前端接口与状态转换调试
和UI无关的逻辑用browser 调有时不太方便,配置 node 命令行调试环境方法如下: cnpm install @babel/core @babel/cli @babel/register @b ...
- 推荐超实用的8款jQuery插件
这里有8款超实用的jQuery插件供大家参考使用,除了jQuery特效的详细使用方法以外,我们还有在线演示和下载及教程,希望对大家有所帮助! 超棒的视差效果jQuery插件 - FractionSli ...
- php的memcache安装，在window10下面
1.memcached-win对应得安装包 2.解压,可以放到任意目录,以管理员身份打开cmd 3.在安装的目录下面,执行如下命令 memcached.exe -d install 安装 Memcac ...
- PHP7函数大全（4553个函数）
转载来自: http://www.infocool.net/kb/PHP/201607/168683.html a 函数 说明 abs 绝对值 acos 反余弦 acosh 反双曲余弦 addcsla ...
- Linux下不同服务器间数据传输--转载
因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...
- Linux下不同服务器间数据传输
因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...
- 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) 收藏 举 ...
- PHP操作Memcache基本函数的方法
Memcache基本函数. Memcache ― Memcache类 Memcache::add ― 增加一个条目到缓存服务器 Memcache::addServer ― 向连接池中添加一个memca ...
- linux下常用文件传输命令 （转）
因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...
随机推荐
- 基于Jmeter+maven+Jenkins构建性能自动化测试平台
一.目的: 为能够将相关系统性能测试做为常规化测试任务执行,且可自动无人值守定时执行并输出性能测试结果报告及统计数据,因此基于Jmeter+maven+Jenkins构建了一套性能自动化测试平台 ...
- SVN学习之windows下svn的安装
svn是apache的一个开源项目,全称为subversion.是一个基于版本的项目管理软件,一般在多人开发的项目中使用,目前svn已经替代了原来的cvs.大多数情况下,svn服务安装在linux服务 ...
- Python爬虫利器五之Selenium的用法
1.简介 Selenium 是什么?一句话,自动化测试工具.它支持各种浏览器,包括 Chrome,Safari,Firefox 等主流界面式浏览器,如果你在这些浏览器里面安装一个 Selenium 的 ...
- 判断系统是64位还是32位的bat方法
if "%PROCESSOR_ARCHITECTURE%"=="x86" goto x86 if "%PROCESSOR_ARCHITECTURE%& ...
- django(权限、认证)系统——自定义UserProfile储存User额外信息
上篇文章我们引出了Django内置的权限控制系统,讲了安装,和最核心和基本的User模型的API和其Manager的API. 接下来我们继续深入下去,使用User对象做一些事情,首先当然就是创建一个U ...
- Java 链接SQL Server 数据库
1 //Java 连接 SQL Server数据库 2 public static final String DRIVERNAME="com.microsoft.sqlserver.jdbc ...
- 【爆料】-《澳大利亚联邦大学毕业证书》FedUni一模一样原件
☞澳大利亚联邦大学毕业证书[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士& ...
- monkey----测试中的要求
测试中的要求: (1)导出的log命名以测试机的imei号为主或者是以测试机的编号为主,这样方便找到测试机,避免出现问题后无法找到机器,难以定位问题. 导出的log文件后缀名以.log命名, ...
- es2.4.6 java api 工具类
网上找了很久没找到2.4.X 想要的java api 工具 自己写了一个,分享一下 导入所需的jar <!-- ElasticSearch begin --> <dependency ...
- 浅析 .Net Core中Json配置的自动更新
Pre 很早在看 Jesse 的Asp.net Core快速入门的课程的时候就了解到了在Asp .net core中,如果添加的Json配置被更改了,是支持自动重载配置的,作为一名有着严重" ...