Как выровнять центр с меньшим размером родителя, который имеет стиль 3d - PullRequest
Новая
       18

Как выровнять центр с меньшим размером родителя, который имеет стиль 3d

0 голосов
/ 18 марта 2020

Мой код касается карты Filping. У меня есть 3 элемента: «flipperContainer», «flipper», «CarbBack» («CardBack» помещается на страницу сначала с rotateY 180). Я столкнулся с проблемой, когда пытался выровнять центр "CardBack" с помощью флиппера, когда размер "CardBack" больше, чем "flipper", кажется, что "CardBack" всегда выравнивается по левому краю с "Flipper". Я пробовал много методов, используя гибкий макет или фиксированное положение с «CardBack», но это просто не работает, кажется, потому что его родительский «flipper» имеет стиль 3d. Ниже приведен мой код, мне действительно нужна помощь, которая может центрировать «CardBack» с помощью «Flipper», сохраняя при этом весь стиль 3d, спасибо! 

const root = document.querySelector("#root");

class Card extends React.Component {
   constructor(props){
     super(props);
   }
   render(){
     
     return (
         <div className="flipperContainer">
           <div className="flipper">
             <div className="cardBack">
             </div>
           </div>
       </div>
     )
   }
 }

ReactDOM.render(<Card/>, root);
.flipperContainer{
  -webkit-perspective: 1000px;
          perspective: 1000px;
	width: 80px;
	height: 50px;
  margin: auto;
  
  border-radius:35px;
  background-color: black;
}
.flipperContainer:hover .flipper, .flipperContainer.hover .flipper {
		-webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}
.flipper {
  width: 40px;
	height: 60px;
  background-color: red;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	-webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  border-radius:35px;
  right:50%;
  position:relative;
}

/* back, initially hidden pane */
.cardBack {
  background-color: green;
  -webkit-backface-visibility: visible;
	        backface-visibility: visible;
	-webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  	width: 70px;
	height: 90px;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...