transform

CSS属性——transform

由 孤街浪徒 提交于 2019-12-18 03:55:31
原则 : 对谁做过渡,过渡效果就加在谁身上. 一、2D变形—移动 translate : 在2D范围内移动 可以单独设置X、Y轴,也可以结合使用 transition : 结合translate使用,过渡效果的属性、时间以及何种效果 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > < / title > < style > div { width : 100 px ; height : 100 px ; background - color : green ; /*设置过渡效果*/ transition : all 0.5 s linear ; } div : hover { /*transform: translateX(100px);*/ /*transform: translateY(100px);*/ transform : translate ( 100 px , 200 px ) ; } < / style > < / head > < body > < div > 我要移动 < / div > < / body > < / html > 运行效果: 在0.5秒内,匀速移动,X轴移动100px,Y轴移动200px 二、2D变形—缩放 scale :

CSS Transition for only one type of transform?

由 旧时模样 提交于 2019-12-18 03:03:54
问题 Is it possible to animate (using transitions) only one type of css transform? I have css: cell{ transform: scale(2) translate(100px, 200px); transition: All 0.25s; } Now, I want only scale to be animated. In this case I could use position:absolute and left/right properties but I far as I remember, translate() is much better in performance. I would also like to avoid using additional html elements. Fiddle: http://jsfiddle.net/6UE28/2/ 回答1: Yes! You separate it into two selectors, one of them

Get element position after transform

由 醉酒当歌 提交于 2019-12-18 02:54:12
问题 I have a UIElement that has various transformations performed on it (scale and translate). Is there a way to get the UIElement's position after transformation? I tried GetValue(Canvas.TopProperty) but it doesn't change from what it was loaded as. I must be missing something obvious but not sure what. (I'm using silverlight) 回答1: It is a little bit unintuitive to do this, but it can be done. It is a two step process. First, what you want to use the TransformToVisual function (from MSDN):

纯CSS Material Design风格按钮

由 只谈情不闲聊 提交于 2019-12-17 22:57:59
其实Material Design的扁平化icon按钮，这类型的按钮往往只利用几何色块的变化，就能抓住使用者的眼光，并且从几何形状中明白按钮的含意，这也是Material Design非常强调的设计理念和精髓。 应用重点与原理 在这篇我纯粹利用CSS，就做出了Material Design风格的按钮，其实没有很难，比较需要知道的重点如下： 伪元素before和after的应用 伪元素在里头扮演相当重要的角色，利用伪元素我们可以产生两个不在HTML里头的类div，可以大幅降低代码的复杂程度。 div的自身宽度与边框 由于我们要进行三角形与矩形之间的形变，虽然三角形可由边框产生，但却无法做出漂亮的形变效果（用背景色的话就会有淡入淡出的现象），所以必须要用边框宽度和矩形大小去搭配，当边框变细的时候，矩形变大，如此一来就可以做出三角形与矩形互相变换的效果啰，下图的红色是纯粹用颜色变换，蓝色则是用边框宽度与div宽度变换，效果应该很明显吧！ transform的应用 CSS里所有的形变都是藉由transform来完成（必要时请加各个浏览器的前坠字），示例里头会用到scale与rotate这两个变形属性。 实现Material Design风格按钮 了解原理之后，先来看一下HTML代码，代码里面有两个主要的div分别是a和b，a的话是利用伪元素来进行变换，b的内容还有三个小i分别是b1

Convert a string to Date format in XSLT

由 强颜欢笑 提交于 2019-12-17 22:53:02
问题 I have a date(string) value in an XML file in this format: Tue Apr 17 03:12:47 IST 2012 I want to use XSL transformation to convert the string/date into this format: 4/17/2012 03:12:47 AM How can I do that in my XSL transform? 回答1: If you are using XSLT 1.0 version, use EXSLT - date:format-date date extension XSLT 2.0 version, use built-in: Formatting Dates and Times date extension But my suggestion is to Have a standard XSD datetime format on XML, on the code-behind (that is, on rendering

前端手写自动旋转3D立方体

由 老子叫甜甜 提交于 2019-12-17 21:16:26
上一篇咱们写了一个3D的立方体，但是不能自己旋转，触摸之后可以进行旋转，现在是升级版的是自动旋转的立方体 下面直接是代码 < template > < div > < div class = "top" > 懵懵懂懂 < / div > < div class = "wrap" > < div class = "cube" > < div class = "out-front" > < img src = "./../assets/images/psb (11).jpg" alt = "" > < / div > < div class = "out-back" > < img src = "./../assets/images/psb (12).jpg" alt = "" > < / div > < div class = "out-left" > < img src = "./../assets/images/psb (19).jpg" alt = "" > < / div > < div class = "out-right" > < img src = "./../assets/617/微信图片_20191213093412.jpg" alt = "" > < / div > < div class = "out-top" > < img src = "./..

Can you use JQuery to transform XML to XML via XSLT

由 陌路散爱 提交于 2019-12-17 20:45:54
问题 I have a website that has links to documents that are dynamically populated based on the document type and all the data is located in one central xml file. I wanted have JQuery pass a parameter to the style sheet, the style sheet segregate out the the nodes using xpath based on the passed parameter, and then sort the notes based on an attribute. From all the documentation I found, JQuery doesn't natively support XSLT and none of the 3rd party plugins can return a new XML object once the

How to prevent XXE attack

由 烈酒焚心 提交于 2019-12-17 18:38:18
问题 We had a security audit on our code, and it mentioned that our code is vulnerable to XML EXternal Entity (XXE) attacks. Explanation XML External Entities attacks benefit from an XML feature to build documents dynamically at the time of processing. An XML entity allows inclusion of data dynamically from a given resource. External entities allow an XML document to include data from an external URI. Unless configured to do otherwise, external entities force the XML parser to access the resource

Detect element if over another element via using CSS3 Transform

由 早过忘川 提交于 2019-12-17 17:09:16
问题 Any easy way to detect element if its over another element ? I'm using CSS3 transform to move a element. (because) Example : - All element size 10x10 pixels Element#A transform : translate(170px, 180px) <-- This element can controll for moving Element#B transform : translate(200px, 200px) How to detect is element#A over some element ? My full demo with jQuery element controller : http://jsfiddle.net/ndZj5/ var over = false; // do something with `over` to `true` to detect this... if(!over) {

Transform in jQuery

由 对着背影说爱祢 提交于 2019-12-17 16:25:23
问题 I'm trying to get an element to animate a rotation hover effect using jquery, I have this jsFiddle going to test. So Far I have this: $(".icon").hover(function() { $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400); },function() { $(this).stop().animate({backgroundColor : "black", color: "red"},400); }); But it doesn't seem to be rotating it at all, I realize the proper way to set the css is: -webkit-transform: rotate(30deg); I've tried this: $(this).stop().animate({
订阅 transform