Hi
I want to use the mx:ProgressBar of flex just in order to be able to show a filled bar according to a certain percentage(If there is a different control to use, please suggest).
Anyhow, I want to show the control flipped by 90 degrees.
I tried to use the rotation="90" but after the rotation you have to set the x coordinate in order to move it to the right and I want to avoid this.
Is there any other way except rotation="90" ?
Thanks,
Clint
if you wish to rotate on the center you try the trick of using rotating animation:
<mx:Rotate
id="ID"
angleFrom="0"
angleTo="360"
originX="0"
originY="0"
/>
With rotation animation you can specify originX/originY so you can rotate it on its center. Call the rotate motion on component creationcomplete
Related
I'm writing a "3D navigation" where moving the mouse cursor subtlely rotates the contents of the screen. When something is clicked I want it to zoom (scale).
The rotation is achieved with transform property, and evoked when the cursor moves. This part works fine!
Now I want the scale to be animated at 500ms. But if I set this transition speed, it wrecks the nice smoothness of the cursor move property.
I tried solving with JavaScirpt, but the problem is that if I start working the "scale" segment alone, it overwrites the rotation property. CSS doesn't remember that I've set the rotation at some point, if I set transform again, during animation, with only the scale.
I have a work-around, but I don't think it's very nice and I suspect it will difficult to understand and refactor it in the future.
So like I can separate the timing for "background" and "color", is there a way to "go deeper", and also separate for the different transform properties?
Thanks in advance!
I am fiddling around with CSS3 perspectives & transformations. Starting from this great 3D cube example, I would like to modify the cube such that it does not just rotate around its center, but roll over its edges.
I got the first left tilt working by rotating the cube around the z-axis, with -webkit-transform-origin: bottom left (see fiddle; example limited to left tilts for simplicity). For a subsequent left tilt, I am struggling how to further adjust the origin. Conceptually, I would need to set the origin relative to the parent container (i.e. for consecutive left tilts, it should gradually wander to the left in 200px steps).
Any help is greatly appreciated!
I've had a go at this and I think you'll need to look into the css matrix transformations available to you to get exactly what you want.
Unfortunately it's not as simple as rotate, then move transform origin.
What happens is the cube is rotated around that edge, but then if you move the point of transform it applies the previous transform to the cube using this new point of origin.
What's more you need to also translate the position of the cube. You can't move it along purely using rotations.
Matrices should solve all of this I think (I don't know an awful lot about them I'm afraid)
You can see the modified jsfiddle I created where the cube is rotated and translated.
The point of translation is the center though, so it doesn't look like the cube is "rolling".
here's the crucial extra code:
...
//left
zAngle -= 90;
xPos -= 50;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)";
...
js Fiddle here: http://jsfiddle.net/DigitalBiscuits/evYYm/20/
Hope this helps you!
I think this tutorial may help you.
http://desandro.github.io/3dtransforms/docs/cube.html
If you want to roll over its edges, just rotateZ and translateX. but how fast you want rotate, you may have to caculate it.
http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html
I was trying to rotate a group(rectangle) on the bottom right coordinates using flex..
See the image
how to achieve this rotation ?
Have you tried setting originX and originY of the effect to the width and height of the component you're rotating?
Here is a link to a tutorial that shows how to do it:
http://www.flashandmath.com/howtos/rotation/
I'm trying to create a "door opening" 3D effect in CSS but I just can't do it. The problem is that using rotateY() function makes the element spin. You can check it here http://jsfiddle.net/uC4du/1/
Do you know how to change the rotateY "reference axis"? What should I do to make the element rotate using its left corners as reference?
You can use 'transform-origin' property ( http://www.w3schools.com/cssref/css3_pr_transform-origin.asp ).
Set it to something like: "-webkit-transform-origin: 0% 50%;"
Here is your example using that property: http://jsfiddle.net/aV76H/
Hope it helps!
I realize you can make one of each effect, set the same target, and hit .play();, but this produces weird results (acknowledged by Adobe, fixed in Flex 4).
I'm trying to have an object move from the top of the screen to the bottom while it rotates around it's own center. When called independently, both of these effects work perfectly. When called together, the object always rotates around the top left corner. I even tried putting them both inside a <Parallel> tag with no success. Has anyone come up with a workaround?
I found a stopgap solution.
The problem (as mentioned in my OP and in the comment to David), is that after the Rotate effect completed one full cycle, if it had a repeatCount=0 to continue indefinitely, it's originX and originY values got reset to the registration (top, left) point, which made the whole appearance wobbly.
The trick, therefore, is to not let it complete a full cycle of rotation. If you have
<mx:Image id="myImage" source="images/someImage.png" />
<mx:Rotate originX="{myImage.width/2}" originY="{myImage.height/2}"
angleFrom="0" angleTo="360" duration="2000" target="{myImage}" />
...then what you need to do is something like ...angleTo="360*100"... AND ...duration="2000*100...
By setting the angleTo property to something very high, it will never finish one Rotate effect before you remove or restart it, and therefore won't throw off the originX and originY, and by multiplying the duration by the same factor as the angleTo you will keep the same rate of rotation you were hoping for.
This is probably as clear as mud to most people, but this was a big breakthrough for me, so I hope this can save someone else some time.
You need to include both Move and Rotate inside a Parallel instance to get them to work simultaneously. Additionally, in order to get a Rotate effect to rotate around the center of a component, you need to set the originX and originY properties to the center of your target, (originX and originY properties define the rotation center point.)
The following examply works perfectly fine:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image id='effectTarget' source="assets/waterfall.jpg" width="390" height="292" scaleContent="true" autoLoad="true"/>
<mx:Parallel duration="5000" id="effectParallel">
<mx:Move xFrom="0" xTo="500" yFrom="0" yTo="500" target="{effectTarget}"/>
<mx:Rotate originX="195" originY="149" angleFrom="0" angleTo="360" target="{effectTarget}"/>
</mx:Parallel>
<mx:Button x="856" y="27" label="Go" click="effectParallel.play()"/>