Question

我是一个巨大的菜鸟，只是想学习自己的代码......我正处于我希望我的代码在所有流行的浏览器中工作的地方.. :) ..我开始时Safari ..我的代码在chrome中运行良好..但-webkit-transition：transform 1.0s;因为某种原因，偶尔会在safari上发生..不确定是否有我需要的额外元标记或者其他东西..但这是我的代码：

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');
        }

我会尽快让jsfiddle工作......谢谢你。

编辑：

我尝试使用更多jquery语法重写按钮功能，并为每个按钮指定一个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>

同样的结果。

Answer 1

所有转换规则都适用于“转换”规则，但不适用于-webkit-transform等带前缀的规则。因此，它不会尝试将转换应用于-webkit-transform规则。

尝试使用：-webkit-transition: -webkit-transform 1.0s;

如果仍然无效，请使用Safari中的Web Developer工具找出应用于元素的规则（无效规则将被删除）。

编辑：为了清晰起见，JsFiddle：link

CSS转换在Safari中立即发生

1 个答案: