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, ...
随机推荐
- Ractive 的 认识
1 前言 Ractive.js是一款入门容易却功能强大的JS库,它的主旨是模板+数据=UI,数据的双向绑定,DOM节点的实时更新,事件处理等多个有用的功能.它吸取了AngularJS中的一些灵感,因此 ...
- Sign http
http接口请求参数签名工具类的实现和测试代码 http://blog.csdn.net/5iasp/article/details/52539901 http://www.what21.com/pr ...
- 玩转spring mvc(六)---自定义异常跳转页面
本文主要是关于如何在出现异常 如404时,跳转到自定义的异常页面,当然这不是spring的知识,但可以整合进去. 在web.xml中新增如下代码,里边的路径可以根据实际情况进行修改 <!-- 7 ...
- FreeRTOS数据结构（一）--链表和链表项
结构体定义 /*链表结构体*/ typedef struct xLIST { listFIRST_LIST_INTEGRITY_CHECK_VALUE /*用于链表完整性检查*/ configLIST ...
- n级阶梯，每次走一步或两步，问最多有多少种走法 二叉树实现
NodeTree类 public class NodeTree { private int num; private NodeTree left; private NodeTree right; pu ...
- attr和prop的区别以及在企业开发中应该如何抉择
attr和prop有很多相同的地方,比如都可以操作标签的属性节点,而且获取的时候都只可以获取到相同节点的第一个,例如这样: $('span').attr('class');和$('span').pro ...
- golang string和[]byte的对比
golang string和[]byte的对比 为啥string和[]byte类型转换需要一定的代价?为啥内置函数copy会有一种特殊情况copy(dst []byte, src string) in ...
- 【源码分析】Canal之Binlog的寻找过程
binlog的寻找过程可能的场景如下: instance第一次启动 发生数据库主备切换 canal server HA情况下的切换 所以这个过程是能够保证binlog不丢失的关键点. 本文从源码的角度 ...
- AT89S52最小系统
NC是NOT CONNECTED的缩写,即空脚. 芯片中NC引脚没有任何用途,只是限于封装形式,该引脚必须存在.
- Cocoa包管理器之CocoaPods详解
CocoaPods在Cocoa开发日常工作中经常用到的包管理器,即依赖管理工具.有的项目也有用Carthage的,Carthage是一个比较新的依赖管理工具,是使用Swift语言开发的.Carthag ...