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
    214
    Vote Rating
    5
    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
    35,672
    Vote Rating
    747
    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

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Vote Rating
    747
    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


    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.
    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.

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

      0  

    Default


    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.

  9. #9
    Ext User
    Join Date
    Jul 2010
    Location
    Calgary, Alberta
    Posts
    186
    Vote Rating
    1
    nosarious is on a distinguished road

      0  

    Default


    Do some reading on 'changing the origin' on this page: http://developer.apple.com/safari/li...ransforms.html

    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.

    You may find some more inspiration here: http://aext.net/2010/06/css3-animation-and-3d-effects/ and elsewhere on the internet.

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

      0  

    Default


    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).

    Thanks again.

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar