javascript - CSS 转换在 Safari 中立即发生

标签 javascript html css safari

我是一个大菜鸟，只是想自己学习编码..我正处于我希望我的代码在所有流行的浏览器中工作的地步.. :) ..我开始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>

相同的结果。

最佳答案

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

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

如果仍然不起作用，请使用 Safari 中的 Web 开发人员工具找出哪些规则应用于元素(无效规则将被划掉)。

编辑为了清楚起见，JsFiddle:link

关于javascript - CSS 转换在 Safari 中立即发生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27535078/

上一篇：jquery - addClass 在窗口滚动时闪烁

下一篇：javascript - AngularJS - 如何在数组长度为零时显示警报并隐藏默认行为？

相关文章：

javascript - 当我从 Highcharts 动态获取数据时，Highcharts 给出了额外的图例

javascript - 新的 react native 元素无法访问

javascript - 在特定元素的某个点将垂直滚动更改为水平滚动

javascript - 当我点击 ul 的汉堡包时，有没有办法水平移动并将 Logo 从中心移动到最左边？

html - CSS 动画旋转在 Firefox 中无法正常运行

javascript - 如何让 JQuery 在旋转动画的循环中等待

javascript - 重定向到 JavaScript 中的相对 URL

html - 悬停菜单边框未显示在 IE 11 中的 iframe 上

html - 为什么我的 bootstrap 列重叠？

javascript - 如何在浏览器崩溃时清除本地存储？

©2024 IT工具网  联系我们