transform

TranslatePoint within a Canvas

由 戏子无情 提交于 2020-01-06 08:39:55
问题 I have a scroll viewer in my application that contains a canvas, in which I have a tree custom-drawn tree structure. I'm trying to get the position of a particular node element in the canvas relative to the scroll viewer (so I can scroll to it), but my attempts aren't working. I've tried using marker.TranslatePoint(new Point(0, 0), scrollViewer) (where marker is the element in the canvas), but this is just returning the position of the canvas, rather than the marker. Similarly, if I try

Combine similar XML records/fields with XSL

由 [亡魂溺海] 提交于 2020-01-06 07:38:39
问题 I am trying to combine similar records (same UniqueID) with XSL. Here is my XML: <ExportXML xmlns="http://www.taleo.com/ws/integration/toolkit/2005/07"> <record> <field name="UniqueID">1234</field> <field name="Location">Michigan</field> <field name="Category">Math</field> </record> <record> <field name="UniqueID">1234</field> <field name="Location">Texas</field> <field name="Category">Science</field> </record> <record> <field name="UniqueID">1234</field> <field name="Location"></field>

Scenekit - convertTransform of a rotated sub-subNode based on world axes

由 爱⌒轻易说出口 提交于 2020-01-06 06:08:58
问题 I have a following scene: [Root Node] | [Main Container] | | [Node A Wrapper] [Node B Wrapper] | | [Node A] [Node B] I've set up pan gesture recognizers in a way that when u pan in open space, the [Main Container] rotates in the selected direction by +/- Double.pi/2 (90deg). When the pan starts on one of the subnodes A, B (i'm hittesting for this on touchesBegan), i want to rotate the subnode along the direction of world axis (again 90deg increments). I'm rotating the [Main Container] using

CSS3+HTML5特效9 - 简单的时钟

由 笑着哭i 提交于 2020-01-06 05:03:20
原文: CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) /*--> */ /*--> */ 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果。 代码及说明 1 <style> 2 @-webkit-keyframes rotateLabel { 3 0%{ 4 -webkit-transform-origin:0% 100%; 5 -webkit-transform: rotate(0deg); 6 } 7 100%{ 8 -webkit-transform-origin:0% 100%; 9 -webkit-transform: rotate(360deg); 10 } 11 } 12 13 @keyframes rotateLabel { 14 0%{ 15 transform-origin:0% 100%; 16 transform: rotate(0deg); 17 } 18 100%{ 19 transform-origin:0% 100%; 20 transform: rotate(360deg); 21 } 22 } 23 .hour 24 { 25 position: absolute; 26 top: 60px; 27 left: 200px; 28 width: 1px; 29 height:

How to achieve LayoutTransform in UWP?

由 我怕爱的太早我们不能终老 提交于 2020-01-06 05:00:51
问题 I'm trying to transform a view as like LayoutTranform in WPF. Can we achieve LayoutTransform in UWP? 回答1: Is your question How to use layouttransform in uwp? I find this post and the answer can help you. The image is that I open the app and I click the button that rotate image. The rotate image. The first thing is create a class. using System; using System.Diagnostics.CodeAnalysis; using Windows.Foundation; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media;

css 2D转换总结

由 為{幸葍}努か 提交于 2020-01-06 04:53:13
CSS中2D转换的形式是这样的： 选择器{ transform：转换函数（参数，参数）； } 其中transform（ 是transform 不是transfrom ）定义元素的2D或者3D转换； 2D转换的函数一共分为五大类： translate() 定义位移的函数；其中后面的参数分别是相对x轴，y轴的偏移的距离，单位为像素，形式：translate（30px,30px）;表示相对x轴，y轴偏移30像素值，可以为负值，表示反向偏移； rotate() 定义旋转的函数；定义元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转，单位为角度deg（degree），形式rotate（30deg）;元素顺时针旋转30度，负值表示逆时针选装； scale()定义缩放的函数，根据给定的宽度（X 轴）和高度（Y 轴）参数，元素将进行缩放，单位为倍数，形式scale（2,2）;表示元素将会按照原尺寸在x轴，y轴分别放大2倍；可以为负数，表示旋转； skew()定义翻转的函数，根据给定的（X 轴、Y 轴）参数进行翻转，单位为角度deg，形式为skew(30px,30px);表示元素会在x轴y轴方向偏转30度；可以为负数，表示反向偏转； matrix() 函数方法把所有 2D 转换方法组合在一起，移动、旋转、缩放、以及翻转元素。注意的是：没有定义perspective（透视效果），没有预计的偏转效果。

css3学习系列之移动

由 跟風遠走 提交于 2020-01-06 04:52:57
transform功能 放缩 使用sacle方法实现文字或图像的放缩处理，在参数中指定缩放倍率，比如sacle(0.5)表示缩小50%，例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale方法使用示例</title> <style> div { width: 300px; margin: 150px auto; background-color: yellow; text-align: center; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); } </style> </head> <body> <div>示例文字</div> </body> </html> 另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率，例子如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scale方法使用示例</title> <style> div { width: 300px; margin: 150px auto; background-color: yellow

CSS3样式中新添加的属性

由 给你一囗甜甜゛ 提交于 2020-01-06 04:52:43
border-radius：允许向元素添加圆角 <style type="text/css"> #r1{ border-radius:25px; background:blue; padding:20px; width:200px; height:150px; } #r2{ border-radius:25px; border:2px solid green; padding:20px; width:200px; height:150px; } #r3{ border-radius:25px; background:url("img/1.jpg"); background-position:left top; background-repeat:repeat; padding:20px; width:200px; height:150px; } </style> </head> <body> <form action="" id="myform" > <p>border-radius </p> <p>指定背景颜色圆角</p> <p id="r1">圆角</p> <p>指定边框元素圆角</p> <p id="r2">圆角</p> <p>指定背景图片圆角</p> <p id="r3">圆角</p> </form> </body> box-shadow：阴影 <style type=

CSS3新增的属性有哪些：

由 一世执手 提交于 2020-01-06 04:52:15
徐先森讲web CSS3新增的属性有哪些： CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 CSS3新增了很多的属性，下面一起来分析一下新增的一些属性： 　　1.CSS3边框： border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888; border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round; 　　2.CSS3背景： background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 background-origin

Css3- transform

由 回眸只為那壹抹淺笑 提交于 2020-01-06 04:52:01
转换是使元素改变形状、尺寸和位置的一种效果，对元素进行移动、缩放、转动、拉长或拉伸。 属性：transform 2D转换属性值 translate() // x,y位置移动 rotate() // 顺时针旋转角度 scale() // x,y元素尺寸增加或减少 skew() // x,y元素翻转给定的角度 1） ）translate() 通过 translate() 方法，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数，元素从其当前位置移动。 例如： div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } 值translate(50px,100px)把元素从左侧向右移动50px，从顶端向下移动100px。 2） ）rotate() 通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
订阅 transform