CSS正反面旋转

勤奋的懒洋洋350

于 2024-05-22 11:43:55 发布

阅读量388

点赞数 3

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_64374806/article/details/139116069

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .boxs {
      position: relative;
      transform: rotateY(0);
      width: 100px;
      height: 100px;
      float: left;
    }
    .boxs div {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      top: 0;
      color: #fff
    }
    .box1 {
      transform: translate(0);
      background: red;
      z-index: 2; 
      backface-visibility: hidden;
      animation: boxRotate 3s infinite;
    }
    .box2 {
      transform: rotateY(-180deg);
      background: blue;
      animation: boxRotate2 3s infinite;
    }
    @keyframes boxRotate{
      0% {
        transform: rotateY(0);
      }
      50% {
        transform: rotateY(-180deg);
      }
      100% {
        transform: rotateY(0deg);
      }
    }
    @keyframes boxRotate2{
      0% {
        transform: rotateY(-180deg);
      }
      50% {
        transform: rotateY(-360deg);
      }
      100% {
        transform: rotateY(-180deg);
      }
    }
    </style>
<body>
    <div>
        <div class="boxs">
          <div class="box1">正面1</div>
          <div class="box2">反面1</div>
        </div>
      </div>
</body>
</html>