I have a rotating div that contains a number of divs around its edge. I'd like to give the illusion of the child divs always staying right side up. To do this I tried rotating the child divs in reverse ( transform:rotate(-360deg); ) but they seem to always go in the same direction as the parent div.
Is there a way have the child divs always appear right side up?
Here's a Fiddle: http://jsfiddle.net/J7xyB/
Solved it
Courtesy of http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
http://jsfiddle.net/cswkd/
Related
Trying to wrap my head around this particular use case of D3 v4 zooming. My example so far is available here:
http://bl.ocks.org/gmarler/f6d17432f6eea34318bff477eb9ebd27
I'm able to get my initial Partition Layout to draw as required (I've left out complexities such as text positioning and color), but I'm not getting very far with zooming properly.
The goal is to zoom whenever one of the svg rect elements is clicked on.
And by "zoom", I mean something somewhat different than the stated default behaviors:
Completely disable anything other than a click on an element - no drag, panning, or mouse wheel activity normally associated with D3 zoom.
When an svg rect element is clicked on, the element expands (or contracts) in the X dimension only, such that its left side abuts the left side of the top level svg's g container, and its right side abuts the right side of the top level svg's g container.
In other words, the element clicked on becomes exactly the width of the chart.
All other g/rect elements vertically "above" the clicked one should scale/translate appropriately.
All other elements vertically "below" the clicked one don't really need to change, as the one we've clicked on will take up 100% of the width of the chart container.
So, here's how far I've gone:
I've calculated the scaling factor (k) - not sure I've done it right. The goal is to set the scaling factor to whatever will make the width of the clicked element expand/contract to the width of the svg.
And I've calculated the transform for x (tx) to be whatever will cause the left side of the g element encapsulating the rect element to align with the left side of the svg.
Using k and tx, I create a zoom transform with d3.zoomIdentity.translate(tx, 0).scale(k)
Now I select all of the g elements that contain rects, tear the current transform="translate(x,y)" apart, and apply the zoom transform to the x portion of the translate - this should move the left side of the element to the left side of the svg
Next, I select the rect under each g element, and apply the zoom transform to the width attribute
This seems to get me closer to the end goal, but I'm sure I'm missing something:
Is it really necessary for me to tear apart the transform="translate(x,y)" the way I am for the g elements?
If I click on certain elements more than once, the scaling keeps increasing. I need to both:
Keep the original zoom ratio so that I can reset to it, or go back to it simply by clicking on the lowest rect element
If an element is clicked on, it's already at 100% width - I need to never allow scaling past 100% width
clicking on any given element the first time expands it to 100% width as expected, but not all elements' ancestors properly scale - I don't care if the the ancestors expand either end past the edge of the viewport, but some of the ancestor elements leave the viewport entirely, which I cannot account for.
I have a circle div with border-radius 4px thick and overflow hidden. There are two elements inside.
When I move the elements inside it using a CSS transform they step over the border of the parent element.
After going over the border they disappear correctly, but I'd like them to disappear just before crossing the parent's border.
Check out the demo of the problem here:
http://codepen.io/vdel26/pen/KEBba
Thanks a lot!
I have noticed a problem with CSS3 rounded corners. They contain inner elements perfectly but when the container has a position:relative applied to it they no longer contain elements. I have set up 2 fiddles to explain.
This has the container set to position:relative
http://jsfiddle.net/abqHE/12/
This one isn't.
http://jsfiddle.net/abqHE/11/
You can see that we have a rounded container only when position is not applied. The problem is that we need to use positioning. Any ideas how to fix this.
Marvellous
Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.
Is there any way to combine zoom property with values different from 1 and filter?
For example, zoom: .5 on block with AlphaImageLoader make transparent areas become black. Assigning background color fix this problem but I need it to be transparent...
Or maybe there is any way to scale with background images in IE6?..
After struggling about two days with this problem,
I found, that there is several reasons, causing transparent areas on child element become black:
zoom > 1 or < 1 on parent block;
position: relative or absolute on parent element;
negative left or top on child element;
clip on child element;
filter on the same element.
I didn't tested much, but in my case applying "filter: alpha(opacity=100);" to parent block helps to get rid of transparency bug.
Maybe this will be useful to somebody...