3D盒子X轴翻转

Posted exesoft

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.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轴翻转的主要内容，如果未能解决你的问题，请参考以下文章

3D盒子翻转焦点图

我的渲染技术进阶之旅解决显示3D模型时因为使用stb_image库加载纹理时未翻转y轴导致模型纹理映射出错的问题

我的渲染技术进阶之旅解决显示3D模型时因为使用stb_image库或者opencv库加载纹理时未翻转y轴导致模型纹理映射出错的问题

AE CS4怎么让图层翻转？

围绕 X 或 Y 轴旋转的两层视图

如何在同时切换子视图的同时围绕 x 轴翻转 UIView