3D盒子X轴翻转

上代码:

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>

 

你可能感兴趣的:(3D盒子X轴翻转)