小编Fer*_*ker的帖子

CSS3卡片翻转背面在变换结束时消失

我已经得到了一组简单的卡片,我需要点击它.问题是当变换完成后,背面(蓝色侧)消失.它会在动画中显示回到正面.

我知道这可能是一个简单的解决方案而且很简单,但可能不是.我可以在Chrome(Canary)和Safari中复制结果.

我已经尝试了一些背面可见性的东西,它可以让它不会消失但是我可以用jQuery监听器点击它并将它翻转回前面.

这是小提琴:http: //jsfiddle.net/9gPfz/1/

这是CSS:`.equipment-card-holder {-webkit-perspective:1000; }

.equipment-card {身高:250px; 宽度:222px; 背景:#fff; box-shadow:0 1px 5px rgba(0,0,0,0.9); 向左飘浮; 保证金:0 9px 30px;

-webkit-transform-style: preserve-3d;


-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; 
}

.equipment-card .card-face{
    -webkit-backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    }

.equipment-card .card-front{
    -webkit-transform: rotateY(0deg);
    }

.equipment-card .card-back{
    -webkit-transform: rotateY(180deg);
    background-color: lightBlue;
    }

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);

    }

.span12{

width: 960px;
}
}`
Run Code Online (Sandbox Code Playgroud)

您将需要一个基于webkit的浏览器,用于我正在使用的供应商前缀.

css3 css-transitions css-transforms

7
推荐指数
1
解决办法
3614
查看次数

当背景位置切换到固定时背景尺寸封面跳跃

我正在开发一个视差/滚动时间轴项目,并且我遇到了 CSS3 背景大小封面属性的问题。

div 具有以下属性:

background: url(../images/timeline/back-6.jpg) no-repeat top center black; 
background-size: cover;
padding-top: 90px;
height: 1855px;
position: relative;
Run Code Online (Sandbox Code Playgroud)

使用 jQuery,我将后台附件切换为固定。当我这样做时,背景图像会“跳入”(这意味着超出屏幕边缘的图像部分现在可见)。这不是想要的结果。

在测试中,我可以将 div 切换为使用背景大小:100% 覆盖,但它在滚动时会导致不同的垂直跳跃问题。

当我将背景切换为固定时,有什么想法可以防止它跳出来吗?(当我将背景设置为滚动时,也会发生相反的情况)。

遗憾的是,我无法链接到此代码的演示,因为该页面尚未准备好部署。

css

4
推荐指数
1
解决办法
6041
查看次数

当涉及两个输入时,jQuery模糊会持续触发

我已经在谷歌上挖了一段时间,在这里堆栈Overflow并且找不到与此相关的任何内容.

我有多个输入文本字段,当模糊时调用jQuery AJAX函数到服务器.它几乎可以很好地工作.

问题是如果我专注于一个文本输入然后单击另一个(使其成为焦点).模糊事件不断被AJAX调用服务器和警报触发.

任何想法如何平静模糊,所以它不是经常开火?可能有一些非常简单的事情我不会这样做可能会解决这个问题.

这是代码(忽略{{}}和{%%}标记,这是一个django模板).

输入:

    <td class="tracking-text">CK Req:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.checkreq|default_if_none:"&nbsp"}}" size="10"></td>
    <td class="tracking-text">LPD:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.lpd|default_if_none:""}}" size="10"></td>
    <td class="tracking-text">PR#</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.prnumber|default_if_none:""}}" size="10"></td>
    <td class="tracking-text">DATE:</td><td class="tracking-td"><input class="tracking-input" type="text" value="{{pr.prdate|default_if_none:""}}" size="10"></td>
Run Code Online (Sandbox Code Playgroud)

jQuery:

        $('.tracking-input').blur(function(){

            $.post( "{% url buy.views.update_purchase_ajax %}",
                {pr_pk: $('span#pr_pk').html()},
                function(data){
                    alert(data.message);
                }, 'json');


        });
Run Code Online (Sandbox Code Playgroud)

任何想法将不胜感激.

jquery

3
推荐指数
1
解决办法
1626
查看次数

标签 统计

css ×1

css-transforms ×1

css-transitions ×1

css3 ×1

jquery ×1