Question

我已将css翻转动画应用于卡片。翻转动画工作正常，但翻转后看不到背面。

这是html文件。这个卡组件是ptree-card，悬停类在翻转时应用于'ptree-card-item'。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="test.css" 
/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="list">
    <div class="col-sm-6 col-xs-12 ptree-card-item">
       <div class="ptree-card">
          <div class="ptree-card-front" style="background: rgb(164, 230, 173)">
             <div class="ptree-card-heading" style="color: rgb(7, 175, 62);">FRONT SIDE</div>

             <div class="pskill-btn-group ptree-btn-group">
                 <button class="ptree-btn ptree-view" onclick="flipSkillCard(this);" style="border: 2px solid rgb(7, 175, 62);">FLIP</button>
                </div>
          </div>
          <div class="ptree-card-back" style="background: red">
            <div class="ptree-card-heading" style="color: rgb(7, 175, 62);">BACK SIDE</div>

             <div class="ptree-back text-center" onclick="flipSkillCardBack(this);">
                <a class="fa fa-chevron-left"></a>FLIP
             </div>
          </div>
       </div>
    </div>
 </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    function flipSkillCard(e){

e.parentNode.parentNode.parentNode.parentNode.classList.toggle("hover")
    }
    function flipSkillCardBack(e){
        e.parentNode.parentNode.parentNode.classList.toggle("hover")
    }
</script>

上述html的css如下。文件test.css

        .ptree-card-item{
            padding: 0;
            padding-bottom: 20px;
        }
        .ptree-card{
            height: 350px;
            padding: 20px;
            background-color: white;
            width: 85%;
            box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
        }
        .ptree-card-front{
            height: 350px;
            width: 100%;
            padding: 20px;
            /* background: linear-gradient(to left, #A4E6AD 0%, white 32%); */
        }
        .ptree-card-back{
            height: 350px;
            width: 100%;  
            padding: 20px; 
            /* background: linear-gradient(to left, #A4E6AD 0%, white 32%); */
        }
        .ptree-card-heading{
            margin: 0;
            text-transform: uppercase;
            font-size: 15px;
            font-weight: 600;
            /* color: #07AF3E; */
        }
        .ptree-card-body{
            padding-top: 5px;
        }
        .ptree-card-text{
            width: 70%;
        }
        .ptree-btn-group{
            padding: 15px 5px 15px 0px;
            position: absolute;
            width: 90%;
            bottom: 40px;
        }
        .ptree-btn{
            text-align: center;
            padding: 5px;
            width: 40%;
            margin: 0px 10px 0px 0px;
            cursor: pointer;
        }
        .ptree-start{
            color: white;
            /* background-color: #07AF3E; */
            border: none;
        }
        .ptree-view{
            color: black;
            background-color: white;
            /* border: 2px solid #07AF3E; */
        }
        .ptree-back-header{
            font-size: 14px;
            font-weight: 600;
        }

        /* ====================================== */
        /* entire container, keeps perspective */
        .ptree-card-item {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            perspective: 1000;
        }
        /* flip the pane when hovered */
        /* .pskill-card-item:hover .pskill-flipper, .pskill-card-item.hover .pskill-flipper { */
        .ptree-card-item.hover .ptree-card {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

        /* flip speed goes here */
        .ptree-card {
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;

            -moz-transition: 0.6s;
            -moz-transform-style: preserve-3d;

            transition: 0.6s;
            transform-style: preserve-3d;

            position: relative;
        }

        /* hide back of pane during swap */
        .ptree-card-front, .ptree-card-back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;

            position: absolute;
            top: 0;
            left: 0;
        }

        /* front pane, placed above back */
        .ptree-card-front {
            z-index: 2;
            /* -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg); */
        }

        /* back, initially hidden pane */
        .ptree-card-back {
            z-index: 3;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

        @-webkit-keyframes spin {
            0%   { 
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
            }
        }
        @keyframes spin {
            0%   { 
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }
            100% {
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
            }
        }

无法弄清楚css问题。任何与背面可见性相关的东西？

Answer 1

您需要删除.ptree-card上的背景颜色。它挡住了背后的“背面”。卡。

.ptree-card{
  height: 350px;
  padding: 20px;
  /* background-color: white; */
  width: 85%;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
}

https://codepen.io/anon/pen/ELbGgb

原始CSS在FF中工作，我不知道为什么。

在css翻转动画后隐藏背面

1 个答案: