3 DケースX軸反転

21890 ワード

上のコード:
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3DX title>
<style>
.container{
    perspective: 50000px;
    transform-style:preserve-3d;
    display:inline-block;
    width: 20%;
}
.box{
    width:80%;
    height: 80px;
    box-shadow:5px 5px 15px #666666;
    line-height:80px;
   }
.box{
    backface-visibility: hidden;
    transition: 2s;
    transform-style: preserve-3d;
    position: absolute;
    text-align: center;
    box-shadow:2px 2px 2px #999999;
}
.box1{background-color: pink;}
.box2{background-color: red;}
.box2{transform: rotateX(-180deg);}
span{
    font-size: 20px;
    line-height: 80px;
}
.vback1{transform: rotateX(180deg);}
.vback2{transform: rotateX(0deg);}
.vfront1{transform: rotateX(0deg);}
.vfront2{transform: rotateX(-180deg);}
style>
head>

<body>
<button id="btnBack"> button>
<button id="btnFront"> button>
<div class="container">
    <div class="box box1">
        <span> span>
    div>
    <div  class="box box2">
        <span> span>
    div>
div>
<div class="container">
    <div class="f box box1">
        <span>  :18.98span>
    div>
    <div class="b box box2">
        <span> :20.98span>
    div>
div>
<div class="container">
    <div class="f box box1">
        <span> :13span>
    div>
    <div class="b box box2">
        <span> :13.56span>
    div>
div>
<script src="js/jquery.min.js">script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btnBack").click(function(){
  $(".f").removeClass("vfront1");
  $(".b").removeClass("vfront2");
  $(".f").addClass("vback1");
  $(".b").addClass("vback2");
});
$("#btnFront").click(function(){
  $(".f").removeClass("vback1");
  $(".b").removeClass("vback2");
  $(".f").addClass("vfront1");
  $(".b").addClass("vfront2");
});
});
script>
body>
html>