24 Aug 2010 9:23 AM #1
Overlays with CSS3 transitions
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.
24 Aug 2010 9:29 AM #2
Post some code, and if possible, a screenshot.- Clint Nelissen
24 Aug 2010 11:33 AM #3
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.
- 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.
btw, the image effect I'm using is similar to the one here:
24 Aug 2010 6:42 PM #4
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
How far do you take the z-index? I've done a lot with CSS3 transforms but haven't actually tried putting anything over top of it.Mitchell Simoens @LikelyMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services email@example.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
24 Aug 2010 8:15 PM #5
Use some free image hoster like pichost and send the link. I also could use the forum image uploader.
25 Aug 2010 7:00 AM #6
I've attached an image of what it looks like. You can see the transformed images "poking" through the overlay.
(I've only played around with -1, 0, 1 on the z-index.... I think I went up to 10)
By mitchellsimoens in forum Ext 3.x: User Extensions and PluginsReplies: 3Last Post: 14 Jul 2010, 11:54 AM
By shuaux in forum Sencha Touch 1.x: DiscussionReplies: 2Last Post: 29 Jun 2010, 6:43 PM
By mitchellsimoens in forum Ext 3.x: User Extensions and PluginsReplies: 6Last Post: 29 Jun 2010, 8:34 AM
By simonob007 in forum Ext GWT: DiscussionReplies: 2Last Post: 19 May 2010, 8:32 AM
By jarrednicholls in forum Ext 3.x: BugsReplies: 1Last Post: 24 Aug 2009, 1:43 PM