Results 1 to 10 of 10

Thread: Overlays with CSS3 transitions

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
      0  

    Question 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
    226
    Vote Rating
    9
      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
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316
    Vote Rating
    1
      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
      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 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •