I've got a custom touch control that does some transformations across x,y, and z. In its default state, it has a 3d transform on Z that makes images appear at an angle. The problem is that when I try to create an overlay, the overlay (and mask) don't completely cover up this control and I get parts of the control "poking through" the modal overlay. I've tried to manipulate the z-index with CSS on both elements, but that seems to have no effect. Any help or ideas would be appreciated.
I think the proxy that where I'm at won't allow this forum's image loader to work. I'll try to better explain what I'm trying to do. Code-wise, everything is working as expected except for the Z axis issue noted below.
To illustrate:
Take an image
apply a perspective and rotateY(30deg) on it, so half of it is in the positive Z space and part in the negative Z space
place a ST button above this image that has an attached overlay handler
press button, overlay appears over the image, but the right side of the image (the part that's rotated into the positive Z axis) is "poking through" the overlay
As I've mentioned, I've tried to play around with the z-index css prop, but it's not making a difference.
Have you tried using webkit dev tools ton see what by default the z-index is on the overlay? And also z-index can go extremely high. If youn want something to be truly on top set it to 10,000 or more.
Did some more digging. Looks like the default z-index from ST is set to 10000 for overlays. I've tried setting this even higher with a cls setting, but no dice. The transformed images still poke through.
Is this maybe a limitation of Safari/CSS3 technologies as of now? At this point, I'd be curious to see anything z-index'd over a CSS3 transformed image to see if it's even possible.
Right now you are rotating in the center on the level just under the overlay. Half of the image goes into the page, half goes out of the page.
If you rotate 'into' the page on one the closest edge instead of the center it shouldn't cause this problem. Specifically think of being able to rotate them 'into' the page. If that still isn't the rebel spy you are looking for, then try to set the z-index of these to half of the width of each image (negative). If they are 50 pixels wide, then a z-index of -26 for them should work.
You may also be able to 'translate' the depth of the image as it rotates, so it sinks into the page as it is rotating on it's center. It 'appears' the same, but there may be some scaling differneces with this (getting smaller as it goes in while rotating) It may be an effect you are looking for.
Thank nosarious. Those are some pretty good suggestions to push the images behind the glass (so to say). I think I like the idea of rotating the image on the edge instead of center and I'll try that first. The next one I'd try is moving the image back and scaling its size up (should end up looking the same size (just further back) and compare the results. Unfortunately, I won't have enough time to play with it soon, so for now I "solved" the problem by hiding the whole image control when the overlay appears and then using a listener to have it reappear (a kludge to be sure).
Overlays with CSS3 transitions
Reply With Quote
