Hybrid View

  1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    dominoedge is on a distinguished road

      0  

    Question Overlays with CSS3 transitions

    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.

  2. #2
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    222
    Vote Rating
    7
    cnelissen is on a distinguished road

      0  

    Default


    Post some code, and if possible, a screenshot.
    - Clint Nelissen

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    dominoedge is on a distinguished road

      0  

    Default


    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:
    1. Take an image
    2. 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
    3. place a ST button above this image that has an attached overlay handler
    4. 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:
    http://www.marcofolio.net/css/3d_ani...pure_css3.html

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,014
    Vote Rating
    848
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    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 services@sencha.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.

  5. #5
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316
    Vote Rating
    1
    blessan is on a distinguished road

      0  

    Default


    Use some free image hoster like pichost and send the link. I also could use the forum image uploader.

  6. #6
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    dominoedge is on a distinguished road

      0  

    Default


    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)
    Attached Images

Similar Threads

  1. [3.2.1][CSS3] Ext.Element.CSS3Spotlight b1
    By mitchellsimoens in forum Ext 3.x: User Extensions and Plugins
    Replies: 3
    Last Post: 14 Jul 2010, 11:54 AM
  2. CSS3 and Editor in general
    By shuaux in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 29 Jun 2010, 6:43 PM
  3. CSS3 animations
    By mitchellsimoens in forum Ext 3.x: User Extensions and Plugins
    Replies: 6
    Last Post: 29 Jun 2010, 8:34 AM
  4. Tree Panel Icon Overlays
    By simonob007 in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 19 May 2010, 8:32 AM
  5. [OPEN-179][3.0.0] CSS3 Selector Parse Bug
    By jarrednicholls in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 24 Aug 2009, 1:43 PM

Thread Participants: 4