カードをクリックで表裏切り替える方法

2781 ワード
Angular2 CSS CSS テキストリンク

　　↓ 回転しながら裏面に切り替わる。↓

●html

<div class="main">
  <div class="card" (click)="cardClick()">
    <div class="front">
        {{ text.front }}
    </div>
    <div class="back">
      {{ text.back }}
    </div>
  </div>
</div>

●css

.main{
    position: relative;
    width:750px;
    height:750px;
}

.card {
    position: absolute;
    width: 350px;
    height:150px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px #ccc;
    transition:all 0.5% ease;
    transform-style: preserve-3d;
}

.flipped {
    transform: rotateY(180deg);
    transition: 1s;  
}

.flippedReverse {
    transform: rotateY(0deg);
    transition: 1s;  
}

.front {
    position: absolute;
    width: 350px;
    height:150px;
    backface-visibility: hidden; /* これで回転した後、表面が表示されなくなる */
    background: #fff;
    color: #333;
    transform:rotateY(0deg); 
    transition: 1s;  /* これを入れないと回転した動きが見えない */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
}

.back {
    position: absolute;
    width: 350px;
    height:150px;
    backface-visibility: hidden;
    background: #fff;
    color: #333;
    transform:rotateY(180deg); 
    transition: 1s;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
}

●ts

card;

ngOnInit() { 
  this.card = document.getElementsByClassName('card');
}

text = {
  front:"ああああ",
  back:"いいいい"
}

frontFlag:Boolean = true;

cardClick(){   
  if(this.frontFlag){
    this.frontFlag = false;
    this.card[0].classList.add('flipped');
    this.card[0].classList.remove('flippedReverse');
  }else{
    this.frontFlag = true;
    this.card[0].classList.add('flippedReverse');
    this.card[0].classList.remove('flipped');
  }
}