transform | 易学教程

xml文件操作之XSLT

阅读更多关于 xml文件操作之XSLT

最近接手的一个项目中数据的获取通过数据库与xml文件双向处理，不知出入什么原因，该项目的先前设计者将数据从数据库取出后又写入到xml文件中，然后从xml文件中读取数据。由于数据量大的原因，项目中几个文件夹加载时浏览器一度崩溃，无赖只得对数据进行优化。本来sql server支持分页与排序操作，起初我打算重写这个存储过程，但是之前的存储过程之后发现代码比较混乱，足有200多行的代码，兵来将挡，一个上午的时间将先前的存储过程重新整理修改支持了分页自定义排序及搜索功能。本以为可以轻松，却发现任有几个文件夹不支持分页功能，原来这些文件中的文件只从数据库中取出部分数据，然后与xml文件交互后取出数据，多么蛋疼的事情，无赖只得找解决方案。网上搜索资料引出今天的主题——XSLT( E Xtensible S tylesheet L anguage Transformations)。 XSLT 在 1999 年 11 月 16 日被确立为 W3C 标准，现在几乎所有的浏览器都支持XML和XSLT。XSLT 用于将一种 XML 文档转换为另外一种 XML 文档，或者可被浏览器识别的其他类型的文档，比如 HTML 和 XHTML。通常，XSLT 是通过把每个 XML 元素转换为 (X)HTML 元素来完成这项工作的。通过 XSLT，您可以向或者从输出文件添加或移除元素和属性。您也可重新排列元素

HTML连载77-3D播放器

阅读更多关于 HTML连载77-3D播放器

一、练习一个3D播放器 1.注意点：动画中如果有和默认样式同名的属性，会覆盖默认样式中同名的属性 2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D187_3DPlayer</title> <style> *{ margin:0px; padding:0px; } body{ background:url("image/taobaoFocusPicture.jpg") no-repeat; background-size:cover;/*这个属性表示我们的图片肯定会填满整个网页，无论图片的大小*/ } ul{ height: 200px; width: 200px; /*background-color: red;*/ top:150px; position:absolute; left:50%; margin-left:-100px; transform-style: preserve-3d;/*注意这个3D效果设置在了父元素上*/ /*transform:rotateX(-10deg);!*这一行的目的就是为了让我们的3D效果显示更加明显*!*/ animation:sport 10s linear 0s infinite

Chrome谷歌浏览器下不支持css字体小于12px的解决办法

阅读更多关于 Chrome谷歌浏览器下不支持css字体小于12px的解决办法

转自： https://www.cnblogs.com/jiangxiaobo/p/5669976.html 先来看下 ie、火狐、谷歌浏览器下各个字体显示情况 ie下：火狐下：谷歌下：从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px; 那么网上一直有一个方法就是给当前样式添加谷歌私有属性：-webkit-text-size-adjust:none; 可是我进行验证后发现，在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢？我们可以使用到 css3里的一个属性： transform:scale() 属性介绍可以戳这里： http://www.w3chtml.com/css3/properties/2d-transform/transform.html 这个属性前给-webkit-谷歌前缀，那么就可以控制字体的大小，代码如下： 1 2 3 4 5 6 7 < style > p{font-size:10px;-webkit-transform:scale(0.8);} /*这里的数字0.8，是缩放比例，可以根据情况变化。*/ </ style > < p >中梦测试10px</ p > 如下图：但是要注意一点，如果这个<p>元素有背景的话，给这个属性会使背景也随着变化，所以，我们可以给<p>标签里再套个

css自适应宽高等腰梯形

阅读更多关于 css自适应宽高等腰梯形

t1是梯形， ct是梯形里面的内容。梯形的高度会随着内容的高度撑高。宽度随着浏览器窗口变宽。梯形上窄下宽或上宽下窄可以通过 transform 的大小来修改。 <div class="ti"> <div class="ct"> <p>文字</p> <p>文字</p> <p>文字</p> </div> </div> <style> .ti { position: relative; width: 40%; height: auto; margin: 50px auto; } .ti:before,.ti:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; background-color: blue; transform-origin: 0 0; -webkit-transform-origin: 0 0; } .ti:before { left: 0; transform: skew(-45deg); -webkit-transform: skew(45deg); } .ti:after { right: 0; transform: skew(45deg); -webkit-transform: skew(-45deg); } .ct{ position: relative;

HTML连载76-正方体和长方体

阅读更多关于 HTML连载76-正方体和长方体

一、如何编辑出一个正方体上后下前的顺序编写，最后在写左右 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D184_3DTransformCube</title> <style> *{ margin:0; padding:0; } ul{ width: 200px; height: 200px; border: 1px solid black; box-sizing:border-box; margin:100px auto; position:relative; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d;/*转换成一个3D的面*/ } li{ list-style: none; width: 200px; height: 200px; text-align:center; line-height:200px; font-size:60px; position:absolute; } ul li:nth-child(1){ background-color: red; transform:rotateX(90deg) translateZ(100px) ; } ul li:nth

CSS3 skew倾斜、rotate旋转动画

阅读更多关于 CSS3 skew倾斜、rotate旋转动画

css3出现之前，我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写，脚本代码较为复杂；若需要实现倾斜、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery如何实现），而且即使能实现估计花的时间代价及维护难度是很大的，很多时候只能依靠画图工具制作此类动画文件；有时候在想如果不用脚本语言，也不用画图工作制作动画文件，就能在网页上实现倾斜、旋转之类的动画效果多好。最近挤出一些业余时间学习CSS3，其中就包含很多动画示例，花了点时间学习和整理今天分享使用html+css3实现skew倾斜、rotate旋转动画，我们先看最终效果图（我这里为了演示效果，就用QQ屏幕截成多张图片，然后制作成gif动画给大家简单展示下，效果不好请大家多多包涵）图1 具体步骤如下： 1、放置两个div，一个作为容器（图1中绿色背景部分 id="warp"），另一个作为动画元素（图1中黄色背景部分 id="box"） HTML代码： <div id="warp"> <div id="box">WEB</div> </div> CSS代码（设置容器及动画元素默认样式）： #warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto; } #box { height:

CSS3学习基本记录

阅读更多关于 CSS3学习基本记录

CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上右上右下左下 box-shadow:阴影 box-shadow:1px 2px 3px #ccc; 1px:水平位移 2px:竖直 border-image:边框图片 border-image: source slice width outset repeat; border-image:url(border.png) 30 round; 用图片border.png 30出的地方重复合理的重复 stretch:默认值。拉伸图像来填充区域 repeat:平铺（repeated）图像来填充区域 round:类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 border-image-source:于指定要用于绘制边框的图像的位置 border-image-slice:图像边界向内偏移 border-image-width:图像边界的宽度 border-image-outset:用于指定在边框外部绘制 border-image-area 的量 border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮 CSS3 背景 background-size:设置背景图标大小

【猫狗数据集】读取数据集的第二种方式

阅读更多关于【猫狗数据集】读取数据集的第二种方式

数据集下载地址：链接：https://pan.baidu.com/s/1l1AnBgkAAEhh0vI5_loWKw 提取码：2xq4 创建数据集： https://www.cnblogs.com/xiximayou/p/12398285.html 读取数据集： https://www.cnblogs.com/xiximayou/p/12422827.html 进行训练： https://www.cnblogs.com/xiximayou/p/12448300.html 保存模型并继续进行训练： https://www.cnblogs.com/xiximayou/p/12452624.html 加载保存的模型并测试： https://www.cnblogs.com/xiximayou/p/12459499.html 划分验证集并边训练边验证： https://www.cnblogs.com/xiximayou/p/12464738.html 使用学习率衰减策略并边训练边测试： https://www.cnblogs.com/xiximayou/p/12468010.html 利用tensorboard可视化训练和测试过程： https://www.cnblogs.com/xiximayou/p/12482573.html 从命令行接收参数： https://www.cnblogs

css中transition-transform-animation的用法

阅读更多关于 css中transition-transform-animation的用法

对css中的transition(过渡)-transform(转换)-animation(动画)认识的不够清楚，今天就放一起集中解决了。 1.transition-过渡元素属性的过渡效果，通常配合hover实现元素初始样式到hover中样式的过渡，语法如下： 1 transition: property duration timing-function delay; property：属性，可以写allduration：持续时间timing-function：变化的曲线delay：延迟transition 元素属性transition要定义在元素的初始样式内，hover内写目标属性值 1 div 2 { 3 width:100px; 4 transition: width 2s; 5 } 6 div:hover {width:300px;} 2.transform-转换 2D转换有元素旋转(rotate)，缩放(scale)，移动(translate) 1 transform: rotate(45deg); /*旋转的单位为deg*/ 2 transform: scale(1.2); /*缩放的倍数，1是原始大小*/ 3 transform: translate(20px, 20px); /*参数分别是水平方法和垂直方向移动的数值，移动的单位可以为像素，也可以为百分比

去除alert弹窗域名

阅读更多关于去除alert弹窗域名

去除alert弹窗域名在JS中调用浏览器的alert弹窗，会出现域名信息，显得不美观，现在利用JS将alert方法重写，这里提供两种写法： 1、去除移动端alert的域名，代码直接调用即可； ( function ( ) { window . alert = function ( name ) { var iframe = document . createElement ( "IFRAME" ) ; iframe . style . display = "none" ; iframe . setAttribute ( "src" , 'data:text/plain' ) ; document . documentElement . appendChild ( iframe ) ; window . frames [ 0 ] . window . alert ( name ) ; iframe . parentNode . removeChild ( iframe ) ; } } ) ( ) ; 2、移动端与pc端都奏效，重写alert方法，代码直接调用即可 window . alert = function ( msg , callback ) { var div = document . createElement ( "div" ) ; div . innerHTML

订阅 transform