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>

原文地址:https://www.cnblogs.com/zjfree/p/9638519.html

时间: 2024-10-20 05:19:48

CSS3D 转换调试的相关文章

Linux下几种文件传输命令

Linux下几种文件传输命令 sz rz sftp scp 最近在部署系统时接触了一些文件传输命令,分别做一下简单记录: 1.sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具.由于它是基于SSH的,会在传输过程中对用户的密码.数据等敏感信息进行加密,因此可以有效的防止用户信息在传输的过程中被窃取,比FTP有更高的安全性.在功能方面与FTP很类似,不仅可以传输文件数据,而且可以进行远程的文件管理(如建立,删除,查看文件列表等操作).Sftp与ftp虽然只有一字之差,但基于

Memcached基础

一.Memcached类 Memcache::add ———— 增加一个条目到缓存服务器 Memcache::addServer ————向连接池中添加一个memcache服务器 Memcache::close ————关闭memcache连接 Memcache::connect ————打开一个memcached服务端连接 Memcache::decrement ————减小元素的值 Memcache::delete ————从服务端删除一个元素 Memcache::flush ————清洗(

ASP.NET数据绑定控件

数据绑定控件简介 数据绑定分为:数据源 和 数据绑定控件 两部分,数据绑定控件通过数据源来获得数据,通过数据源来隔离数据提供者和数据使用者,数据源有:SqlDataSource,AccessDataSource,ObjectDataSource,LinqDataSource,XmlDataSource 等大部分不会直连接数据库,所以SqlDataSource,AccessDataSource不会使用ObjectDataSource 是WEB开发中应用最广的数据源,也能很容易的进行数据库切换数据绑

php的memcache安装,在window10下面

1.memcached-win对应得安装包 2.解压,可以放到任意目录,以管理员身份打开cmd 3.在安装的目录下面,执行如下命令 memcached.exe -d install 安装 Memcached.exe –d start 开启服务 Memcahced.exe –d stop 停止服务 Memcached.exe –d restart 重启 memcached.exe -d uninstall 卸载 4.在启动之后连接 D:wampbin> telnet 127.0.0.1 11211

memcache分布式缓存

1 什么是memcache 以及memcache有什么作用 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调用到内存中,然后从内存中读取,从而大大提高读取速度. 2 下载并安装(希望大家自己去动手 印象会更深) 下载memcache 进入cmd ,切换到 memcached.exe 文件所在目录 memcached.exe –d install (1)

Linux的文件传输命令总结

因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp,wget,curl. rcp rcp不是一种安全的的传输文件的方式,rcp通过rsh(rsh见下面)来执行远程命令,要使用rcp必须经过一些配置,现在rcp已经被scp取代了,常用scp来进行文件传输.要使用rcp,需要具备以下条件: (1)如果系统中有/etc/hosts 文件,应确保该文件包含要

PHP操作Memcache基本函数的方法

Memcache基本函数. Memcache ― Memcache类 Memcache::add ― 增加一个条目到缓存服务器 Memcache::addServer ― 向连接池中添加一个memcache服务器 Memcache::close ― 关闭memcache连接 Memcache::connect ― 打开一个memcached服务端连接 Memcache::decrement ― 减小key的值 Memcache::delete ― 从服务端删除一个key Memcache::fl

linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)

因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp,wget,curl. rcp rcp不是一种安全的的传输文件的方式,rcp通过rsh(rsh见下面)来执行远程命令,要使用rcp必须经过一些配置,现在rcp已经被scp取代了,常用scp来进行文件传输.要使用rcp,需要具备以下条件: (1)如果系统中有/etc/hosts 文件,应确保该文件包含要

linux下常用文件传输命令(转)

因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp,wget,curl. rcp rcp不是一种安全的的传输文件的方式,rcp通过rsh(rsh见下面)来执行远程命令,要使用rcp必须经过一些配置,现在rcp已经被scp取代了,常用scp来进行文件传输.要使用rcp,需要具备以下条件: (1)如果系统中有/etc/hosts 文件,应确保该文件包含要