简单的3D翻转效果

使用css可以实现如下的翻转效果

先创建一个大盒子包裹两个个盒子的结构(三个盒子等高等宽)

使用父相子绝定位将三个盒子重叠在一起,并在父盒子里开启3D效果

        .box {position: relative;width: 200px;height: 200px;margin: 200px auto;background-color: aqua;/*开启3D效果*/transform-style: preserve-3d;transition: all 2s;}.box>div {position: absolute;top: 0;left: 0;}

此时后面的盒子会因为css层叠性覆盖.one盒子.让其沿着Z轴向前移动其高度的一半

        .box .one {width: 200px;height: 200px;background-color: aquamarine;transform: translateZ(100px);}

然后给大盒子加上hover伪类,并使其沿着Y轴翻转

  .box:hover {transform: rotateY(180deg);}

此时发现,大盒子颜色不可见

 这是因为.two盒子覆盖住了父盒子,使.box向后移动

        .box .two {width: 200px;height: 200px;background-color: chartreuse;transform: translateZ(-100px);}

大功告成!

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！