3D盒子X轴翻转

时间：2020-02-12 21:51:44 阅读：67 评论：0 收藏：0 [点我收藏+]

上代码:

<!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轴翻转

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)