How can i fix this split in half and become invisible of the div which has a animation of rotateY-CodePudding

<body>
    <div >
        <div ></div>
    </div>
    <script type="module" src="/main.js"></script>
</body>

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    font-size: 10px;
}

.container {
    height: 100%;
    width: 100%;
    background-color: #000000;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.container .aDiv {
    height: 25rem;
    width: 25rem;
    background-color: #f12369;
    backface-visibility: visible;
    transition: all 2s;
    transform-origin: 50% 50%;
}

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

https://codepen.io/Menax47/pen/WNyvWYo

on hover on the div you will get a rotateY animation.. but the problem is it split the div in half if i use background color to the parent div....how can i solve this problem...

https://codepen.io/Menax47/pen/WNyvWYo

div will rotate without spliting div in half and dissapare

CodePudding user response：

The black background of the wrapper bothers you. Make the background of the wrapper transparent and it will work.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 10px;
  background-color: #000000;
}

.container {
  height: 100%;
  width: 100%;
  
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.container .aDiv {
  height: 80vh;
  width: 80vh;
  background-color: #f12369;
  backface-visibility: visible;
  transition: all 2s;
  transform-origin: 50% 50%;
}

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

<div >
  <div ></div>
</div>