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, ...
随机推荐
- SSIS 检查点
在SSIS中,检查点实际上是一个记录系统,用于记录控制流中Task组件的执行状态.通过合理地配置Checkpoint,在Package运行出错之后,重新执行Package,可以跳过上一次已经成功执行的 ...
- remove方法
1.jQuery的remove()方法 http://www.365mini.com/page/jquery-remove.htm ①返回值是jquery对象本身 所以可以做删除再添加的操作 // 移 ...
- Hexo的更新 主题的更换
1:HEXO更新 ①hexo generate ②hexo deploy 2: HEXO主题的更换,①找到主题的github地址后 进入自己的HEXO文件夹然后 git clone xxxx(地址) ...
- 用react重构个人网站 3-23
1: :before 选择器在被选元素的内容前面插入内容 2: float是什么?浮动在CSS中的作用 3:CSS运用在React中的两种方式 使用className属性,CSS内容就用link加 ...
- 深入浅出java常量池
理论 jvm虚拟内存分布: 程序计数器是jvm执行程序的流水线,存放一些跳转指令. 本地方法栈是jvm调用操作系统方法所使用的栈. 虚拟机栈是jvm执行java代码所使用 ...
- java泛型中使用的排序算法——归并排序及分析
一.引言 我们知道,java中泛型排序使用归并排序或TimSort.归并排序以O(NlogN)最坏时间运行,下面我们分析归并排序过程及分析证明时间复杂度:也会简述为什么java选择归并排序作为泛型的排 ...
- 阿里云ECS安装Cadvisor报错
阿里云ECS安装Cadvisor报错安装命令: sudo docker run \ --volume=/:/rootfs:ro \ --volume=/var/run:/var/run:ro \ -- ...
- 基于ITextSharp插件在ASP.NET MVC中将图表导出为PDF
样本: 在这个示例中,我们使用的是微软给我们提供的数据库,也就是家喻户晓的Northwind数据库.要下载Microsoft的免费样本Northwind数据库,您需要访问以下URL.下载Northwi ...
- requests使用“proxy”代理访问接口
在requests中使用proxy代理访问 使用前先更新requests版本为支持socks的版本. 先pip安装对应库: >> pip install -U requests[so ...
- Spring boot 继承 阿里 autoconfig 配置环境参数
前提:基于springboot 项目 1. 配置pom.xml 文件 <plugin> <groupId>com.alibaba.citrus.tool</groupId ...