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, ...
随机推荐
- Ubuntu 18.04 on Windows 10 更改 Oh-My-Zsh agnoster 主题下的目录背景色
题外话 我的 MacBook Pro 已经使用了6年多的时间,尽管作为一个 .NET 程序员绝大部分时间都是在 Windows 下工作,直到 .NET Core 的逐步成熟.要说 Mac OS,最满意 ...
- Re：从零开始的领域驱动设计
领域驱动的火爆程度不用我赘述,但是即便其如此得耳熟能详,但大多数人对其的认识,还只是停留在知道它的缩写是DDD,知道它是一种软件思想,或者知道它和微服务有千丝万缕的关系.Eric Evans对DDD的 ...
- selenium提供的截图功能
get_screenshot_as_file()提供一个截屏功能.在自动化执行过程中,执行失败后只能看到代码的运行错误,而不能直接看到ui上的错误,利用截屏保存下来很容易的进行问题的判断 先来执行一个 ...
- 如何将数据库中存的树转化为树形列表(以easyui的tree为例)
很多时候,我们会把一棵树存放到数据库中,当前台需要展示一个树形列表时,将这棵树读取出来并显示,这个过程是怎么实现的呢? 这篇文章是以构造一棵easyui前台框架的一个树形列表为例,后台框架是sprin ...
- Android软键盘弹出，覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- BZOJ_1100_[POI2007]对称轴osi_KMP+计算几何
BZOJ_1100_[POI2007]对称轴osi_KMP+计算几何 Description FGD小朋友——一个闻名遐迩的年轻数学家——有一个小MM,yours.FGD小朋友非常喜欢他的MM,所以他 ...
- BZOJ_1266_[AHOI2006]上学路线route_最小割
BZOJ_1266_[AHOI2006]上学路线route_最小割 Description 可可和卡卡家住合肥市的东郊,每天上学他们都要转车多次才能到达市区西端的学校.直到有一天他们两人参加了学校的信 ...
- nginx用户认证与htpasswd命令
最近在搭建ELK,然后ELK的kibana界面想添加一个访问限制,看到kibana有个插件x-pack,本来想用用,发现是收费的,就放弃了,然后就想着想配置下nginx的认证访问来实现简单的访问登陆. ...
- GopherChina第二天小结
GopherChina第二天小结 今天继续昨天的文章,参加了第二天的GopherChina,例行完成总结. 基于MINIO的对象存储方案在探探的实践 关于对象存储,之前用过seaweedfs,但是对M ...
- Spring Boot 2.0 WebFlux 教程 (一) | 入门篇
目录 一.什么是 Spring WebFlux 二.WebFlux 的优势&提升性能? 三.WebFlux 应用场景 四.选 WebFlux 还是 Spring MVC? 五.异同点 六.简单 ...