CSS Transform happens instantly in Safari

Question

i'm a huge noob just trying to learning to code on my own.. and i'm at the point where i want my code to work in all the popular browsers .. :) .. i'm starting with Safari.. my code runs fine in chrome.. but the -webkit-transition: transform 1.0s; just happens instantly on safari for some reason.. not sure if there is an extra meta tag that I need or something.. but this is my code:

HTML

    <section id="prismSection">

        <h1 class="text-center">Now a Rectangular Prism</h1>

        <div class="prismWrapper">
            <div id="prism">
                <figure class="front"><p>Front</p></figure>
                <figure class="back"><p>Back</p></figure>
                <figure class="right"><p class="vertical-text">Right</p></figure>
                <figure class="left"><p class="vertical-text2">Left</p></figure>
                <figure class="top"><p>Top</p></figure>
                <figure class="bottom"><p>Bottom</p></figure>
            </div>
        </div>

        <button class="btn btn-lg btn-primary" onclick="prismFront();">Front</button>
        <button class="btn btn-lg btn-primary" onclick="prismBack();">Back</button>
        <button class="btn btn-lg btn-primary" onclick="prismRight();">Right</button>
        <button class="btn btn-lg btn-primary" onclick="prismLeft();">Left</button>
        <button class="btn btn-lg btn-primary" onclick="prismTop();">Top</button>
        <button class="btn btn-lg btn-primary" onclick="prismBottom();">Bottom</button>

    </section>

CSS

#prismSection {
    text-align: center;
    padding-bottom: 40px;
}
#prismSection > button {
    border: 2px solid black;
}
#prismSection > h1 {
    color: white;
    font-family: Paytone One, arial;
    font-size: 2.5em;
}
#prism > figure:nth-child(1) > p,
#prism > figure:nth-child(2) > p,
#prism > figure:nth-child(3) > p,
#prism > figure:nth-child(4) > p {
    color: black;
    font-family: Paytone One, arial;
    position: relative;
    top: 50px;
    font-size: 3em;
}
#prism > figure:nth-child(4) > p {
    top: 65px;
}
#prism > figure:nth-child(5) > p,
#prism > figure:nth-child(6) > p {
    color: black;
    font-family: Paytone One, arial;
    position: relative;
    top: 10px;
    font-size: 3em;
}
.vertical-text {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
.vertical-text2 {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}
.prismWrapper {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 300px;
    height: 200px;
    position: relative;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    margin-right: auto;
    margin-left: auto;
}
#prism {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}
#prism figure {
    display: block;
    position: absolute;
    background: #606060;
    border: 2px solid white;
    border-radius: 5px;
}
#prism .front,
#prism .back {
    width: 296px;
    height: 196px;
}
#prism .right,
#prism .left {
    width: 96px;
    height: 196px;
    left: 100px;
}
#prism .top,
#prism .bottom {
    width: 296px;
    height: 96px;
    top: 50px;
}
#prism .front {
    transform: rotateY( 0deg ) translateZ( 50px);
    -webkit-transform: rotateY( 0deg ) translateZ( 50px);
    -ms-transform: rotateY( 0deg ) translateZ( 50px);
    -o-transform: rotateY( 0deg ) translateZ( 50px);
    -moz-transform: rotateY( 0deg ) translateZ( 50px);
}
#prism .back {
    transform: rotateY( 180deg ) translateZ( 50px);
    -webkit-transform: rotateY( 180deg ) translateZ( 50px);
    -ms-transform: rotateY( 180deg ) translateZ( 50px);
    -o-transform: rotateY( 180deg ) translateZ( 50px);
    -moz-transform: rotateY( 180deg ) translateZ( 50px);
}
#prism .right {
    transform: rotateY( 90deg ) translateZ( 150px );
    -webkit-transform: rotateY( 90deg ) translateZ( 150px );
    -ms-transform: rotateY( 90deg ) translateZ( 150px );
    -o-transform: rotateY( 90deg ) translateZ( 150px );
    -moz-transform: rotateY( 90deg ) translateZ( 150px );
}
#prism .left {
    transform: rotateY( -90deg ) translateZ( 150px );
    -webkit-transform: rotateY( -90deg ) translateZ( 150px );
    -ms-transform: rotateY( -90deg ) translateZ( 150px );
    -o-transform: rotateY( -90deg ) translateZ( 150px );
    -moz-transform: rotateY( -90deg ) translateZ( 150px );

}
#prism .top {
    transform: rotatex( 90deg ) translateZ( 100px );
    -webkit-transform: rotatex( 90deg ) translateZ( 100px );
    -ms-transform: rotatex( 90deg ) translateZ( 100px );
    -o-transform: rotatex( 90deg ) translateZ( 100px );
    -moz-transform: rotatex( 90deg ) translateZ( 100px );
}
#prism .bottom {
    transform: rotatex( -90deg ) translateZ( 100px );
    -webkit-transform: rotatex( -90deg ) translateZ( 100px );
    -ms-transform: rotatex( -90deg ) translateZ( 100px );
    -o-transform: rotatex( -90deg ) translateZ( 100px );
    -moz-transform: rotatex( -90deg ) translateZ( 100px );
}
#prism { 
    transform: translateZ( -100px ); 
    -webkit-transform: translateZ( -100px ); 
    -ms-transform: translateZ( -100px ); 
    -o-transform: translateZ( -100px ); 
    -moz-transform: translateZ( -100px ); 
}
#prism.show-front {
    transform: translateZ( -50px ) rotateY( 0deg );
    -webkit-transform: translateZ( -50px ) rotateY( 0deg );
    -ms-transform: translateZ( -50px ) rotateY( 0deg );
    -o-transform: translateZ( -50px ) rotateY( 0deg );
    -moz-transform: translateZ( -50px ) rotateY( 0deg );
}
#prism.show-back {
    transform: translateZ( -50px ) rotateY( -180deg );
    -webkit-transform: translateZ( -50px ) rotateY( -180deg );
    -ms-transform: translateZ( -50px ) rotateY( -180deg );
    -o-transform: translateZ( -50px ) rotateY( -180deg );
    -moz-transform: translateZ( -50px ) rotateY( -180deg );
}
#prism.show-right {
    transform: translateZ( -150px ) rotateY( -90deg );
    -webkit-transform: translateZ( -150px ) rotateY( -90deg );
    -ms-transform: translateZ( -150px ) rotateY( -90deg );
    -o-transform: translateZ( -150px ) rotateY( -90deg );
    -moz-transform: translateZ( -150px ) rotateY( -90deg );
}
#prism.show-left {
    transform: translateZ( -150px ) rotateY( 90deg );
    -webkit-transform: translateZ( -150px ) rotateY( 90deg );
    -ms-transform: translateZ( -150px ) rotateY( 90deg );
    -o-transform: translateZ( -150px ) rotateY( 90deg );
    -moz-transform: translateZ( -150px ) rotateY( 90deg );
}
#prism.show-top {
    transform: translateZ( -100px ) rotateX( -90deg );
    -webkit-transform: translateZ( -100px ) rotateX( -90deg );
    -ms-transform: translateZ( -100px ) rotateX( -90deg );
    -o-transform: translateZ( -100px ) rotateX( -90deg );
    -moz-transform: translateZ( -100px ) rotateX( -90deg );
}
#prism.show-bottom {
    transform: translateZ( -100px ) rotateX( 90deg );
    -webkit-transform: translateZ( -100px ) rotateX( 90deg );
    -ms-transform: translateZ( -100px ) rotateX( 90deg );
    -o-transform: translateZ( -100px ) rotateX( 90deg );
    -moz-transform: translateZ( -100px ) rotateX( 90deg );
}
#prism { 
    transition: transform 1.0s;
    -webkit-transition: transform 1.0s;
    -ms-transition: transform 1.0s; 
    -o-transition: transform 1.0s;
    -moz-transition: transform 1.0s;
}

Javascript

        function prismFront() {
            $('#prism').removeClass('show-back');
            $('#prism').removeClass('show-right');
            $('#prism').removeClass('show-left');
            $('#prism').removeClass('show-top');
            $('#prism').removeClass('show-bottom');
            $('#prism').addClass('show-front');
        }
        function prismBack() {
            $('#prism').removeClass('show-front');
            $('#prism').removeClass('show-right');
            $('#prism').removeClass('show-left');
            $('#prism').removeClass('show-top');
            $('#prism').removeClass('show-bottom');
            $('#prism').addClass('show-back');
        }
        function prismRight() {
            $('#prism').removeClass('show-back');
            $('#prism').removeClass('show-front');
            $('#prism').removeClass('show-left');
            $('#prism').removeClass('show-top');
            $('#prism').removeClass('show-bottom');
            $('#prism').addClass('show-right');
        }
        function prismLeft() {
            $('#prism').removeClass('show-back');
            $('#prism').removeClass('show-right');
            $('#prism').removeClass('show-front');
            $('#prism').removeClass('show-top');
            $('#prism').removeClass('show-bottom');
            $('#prism').addClass('show-left');
        }
        function prismTop() {
            $('#prism').removeClass('show-back');
            $('#prism').removeClass('show-right');
            $('#prism').removeClass('show-left');
            $('#prism').removeClass('show-front');
            $('#prism').removeClass('show-bottom');
            $('#prism').addClass('show-top');
        }
        function prismBottom() {
            $('#prism').removeClass('show-back');
            $('#prism').removeClass('show-right');
            $('#prism').removeClass('show-left');
            $('#prism').removeClass('show-top');
            $('#prism').removeClass('show-front');
            $('#prism').addClass('show-bottom');
        }

i'll try to get a jsfiddle working soon.. thanks a ton.

Edit:

I've tried rewriting the button functions using more jquery syntax and giving each button an ID:

<script type="text/javascript">
        $(function() {

            $('#btnFront').on('click', function() {
                $('#prism').css('transform', 'translateZ( -50px ) rotateY( 0deg )');
            });

            $('#btnBack').on('click', function() {
                $('#prism').css('transform', 'translateZ( -50px ) rotateY( -180deg )');
            });

            $('#btnRight').on('click', function() {
                $('#prism').css('transform', 'translateZ( -150px ) rotateY( -90deg )');
            });

            $('#btnLeft').on('click', function() {
                $('#prism').css('transform', 'translateZ( -150px ) rotateY( 90deg )');
            });

            $('#btnTop').on('click', function() {
                $('#prism').css('transform', 'translateZ( -100px ) rotateX( -90deg )');
            });

            $('#btnBottom').on('click', function() {
                $('#prism').css('transform', 'translateZ( -100px ) rotateX( 90deg )');
            });

        });
    </script>

same results.

Answer 1

All your transition rules apply to the "transform" rule but not the prefixed rules like -webkit-transform. Therefore it will not try to apply the transition to a -webkit-transform rule.

Try using: -webkit-transition: -webkit-transform 1.0s;

If that still does not work, use the Web Developer tools in Safari to find out which rules are applied to the elements (invalid rules will be crossed out).

EDIT: JsFiddle for clarity: link