fa-perspective not working as expected

[elinfante]

Hi guys,

I am trying to achieve a very simple animation as per this example: http://famo.us/university/lessons/#/famous-102/transitionables/6

It all works as expected apart from the perspective. How can I set the perspective up as I am not using vanilla famo.us?

Thanks in advance!

    <fa-modifier fa-perspective="1000" fa-transform="angleTransform()" fa-align="[0.5,0.5]" fa-origin="[0.5,0.5]" > 

        <fa-surface fa-size="[undefined, undefined]" ng-mouseover="over()" >
            <div>
                <img src="http://cdn.iphonephotographyschool.com/wp-content/uploads/cropping-for-instagram.jpg" width="200" height="200" />
            </div>
        </fa-surface>

    </fa-modifier>

[elinfante]

I have found this example in CodePen to solve my problem. http://codepen.io/anon/pen/nmfst

[elinfante]

I had to update to version 0.4.0 but when I did nothing happend. I have my fa-app set up as follows:

<fa-app fa-perspective="1000" class="full-screen">

And this is the fa-modifier:

    <fa-modifier    
                    fa-transform="transform" 
                    fa-align="[0.5,0.5]" 
                    fa-origin="[0.5,0.5]" > 

        <fa-surface fa-size="[undefined, undefined]" ng-mouseover="over()" >
            <div>
                <img src="http://cdn.iphonephotographyschool.com/wp-content/uploads/cropping-for-instagram.jpg" width="200" height="200" />
            </div>
        </fa-surface>

    </fa-modifier>

And the directive:

    .directive('bzP02instagalleryCarrousel', ['$famous', function($famous) {

        var Transitionable      = $famous['famous/transitions/Transitionable'];
        var Transform           = $famous['famous/core/Transform'];

        return {
            restrict: 'E',
            scope: {
                photos: '=',
                overThumb : '&'
            },
            templateUrl: 'templates/directives/panes/P02_instagallery/B02_carrousel-tpl.html',
            controller: function($scope, $element) {
            },
            link: function(scope,el,attr) {
                scope.photoAnimate = {
                    xStart: 100,
                    yPos: 750,
                    xPos: 1000,
                    xScale: 1,
                    yScale: 1,
                    xOrigin : 0.5,
                    yOrigin : 0.5,
                };

                scope.transform = new Transitionable(
                  Transform.multiply(
                    Transform.translate(0, 0, 0), 
                    Transform.rotateY(Math.PI / 3)
                  )); 
            }

        };
    }]);

Any idea why still not showing the perspective when I apply rotateY?

Thanks!

[zackbrown]

Hey @elinfante — I just tried out your code (patching it into the famous-angular-examples perspective example) and it worked as expected for me.

Let's try a few things:

1. a sanity check: does http://thomas-street.s3.amazonaws.com/famous/famous-angular-examples-10-4/index.html#/perspective work for you? It should be applying a pretty extreme perspective as a beige and then red surface rotate over the y-axis. This code is available at github.com/thomasstreet/famous-angular-examples, so if it works for you you could try looking for differences between your code and that code.
2. a boilerplate check: have you included famous-angular.css in your root file in addition to famous-angular.js? Have you included famous.css? (you should not; you should only include famous-angular.css)
3. css/browser check: perspective won't work if "transform-style: preserve-3d" is not applied to a parent container. Can you try using the Chrome or Firefox inspector/tools to ensure that transform-style: preserve-3d is there? (this should come from famous-angular.css) On the other hand, see #186 : I have yet to be able to reproduce that issue, but it sounds like Steve was facing similar problems to yours. You could try removing the transform-style: preserve-3d from famous-angular-container in famous-angular.css per his fix. If that fixes this for you, please let me know and I would love to figure out how to repro that issue.

[elinfante]

1 - checked. It does work for me and I cannot seem to find any substantial differences. 2 - checked. I only include famous-angular.css 3 - checked. transform-style is there...

I am banging my head against the wall again :-)

[steveblue]

@elinfante We had to comment out the transform-style for .famous-angular-container to allow elements to have perspective, transform on the z-axis using f/a 0.3. We kept these properties on .famous-group however or any container we need to have perspective.

.famous-angular-container {
    //-webkit-transform-style: preserve-3d;
    //transform-style: preserve-3d;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    pointer-events: none;
    height: 100%;
    width: 100%;
}

[elinfante]

I did try that but that does not make any difference, besides I am using f/a 0.4.0.

[steveblue]

We can replicate that issue even in 0.4.0.

[elinfante]

After a lot of digging out I managed to find out what the problem is:

<fa-container-surface fa-options="{overflow:hidden}">

breaks my perspective, If I put this example outside of that directive It works, inside the perspective dissappears. I need that fa-container-surface to to mask some content.

Any idea of how to fix that? Thanks!

[steveblue]

I've found that container surfaces need to have their own perspective and transform-style applied to them.

[elinfante]

Thanks steveblue, that is right If I apply the following properties to fa-container-surface It fixes the issue, so I still keep the mask with the perspective:

$scope.cellContainerOptions = { 
            properties:{
                overflow: 'hidden',
                perspective: '1000px', 
            }
};

applied as follows:

<fa-container-surface fa-options="cellContainerOptions"> 

Thanks guys!

[elinfante]

FYI

I have also just realised that removing fa-perspective in fa-app but leaving the perspective property within the container surface improves the performace a lot.