码迷,mamicode.com
首页 > 其他好文 > 详细

3D盒子X轴翻转

时间:2020-02-12 20:43:03      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:dcl   back   html   text   addclass   query   rem   height   width   

上代码:

<!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.98</span>
    </div>
    <div class="b box box2">
        <span>演唱:20.98</span>
    </div>
</div>
<div class="container">
    <div class="f box box1">
        <span>知识问答:13</span>
    </div>
    <div class="b box box2">
        <span>知识问答:13.56</span>
    </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轴翻转

标签:dcl   back   html   text   addclass   query   rem   height   width   

原文地址:https://www.cnblogs.com/exesoft/p/12300607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!