JSFiddle - React, Tailwind, and code Playground

by moathhowari

HTML

<div id="screen_wrap">
					<div id="category_wrapper">
         				<div id="category_4" class="category oben">
							<h2 class="category_name" id="datum">look at blue box</h2>
							<div class="idea_bg" style="">
								<ul class="idea_wrap_one" style="">
                                    <li>big</li>
                                </ul>
							</div>
							<div class="idea_bg"  style="">
								<ul class="idea_wrap_two" style="">
									<li>blue box</li>
       							</ul>
							</div>
						</div>

         				<div id="category_5" class="category unten">
							<h2 class="category_name" id="">the blue box has a different width now</h2>
							<div class="idea_bg" style="">
								<ul class="idea_wrap_one" style="">
                                    <li>smaller</li>
                                </ul>
							</div>
							<div class="idea_bg"  style="">
								<ul class="idea_wrap_two" style="">
									<li>blue box</li>
       							</ul>
							</div>
							</div>

						</div>

				    </div><!--category_wrap ends here-->
				</div>

CSS

#screen_wrap {
	width: 500px;
	height: 210px;
	display: block;
	background-color:red;
	float: left;
	margin: 45px 0 0 12px;
    
position:relative;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  overflow:hidden;    
}
#category_wrapper {
    
	width: 462px !important;
	height: 146px !important;
	margin: 40px 19px 0;
    
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.category {
	width: 422px !important;
    margin-left:17px;
    margin-right:20px;
  position: absolute;
 -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

}

.idea_bg {
	width:50%;
	height: 106px;
	overflow: hidden;
	display: block;
	float: left;
	background-color:blue;
    background-repeat:no-repeat;

    position:relative

}

.idea_bg .idea_wrap_one,.idea_bg .idea_wrap_two {
	padding-left: 0px;
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	color: #fff;
	list-style-type: none;

    position:absolute;
}

.idea_bg .idea_wrap_one li,.idea_bg .idea_wrap_two li {
	height: 106px;
	width: 211px;
	display: block;
	text-align: center;
	margin-top: 37px;
	background: none !important;
}

#mottos li {
	width: 422px;
}


#category_wrapper.show-unten{
  -webkit-transform: translateZ(-5px) rotateX(90deg);
  -moz-transform: translateZ(-75px) rotateX(90deg);
  -ms-transform: translateZ(-75px) rotateX(90deg);
  -o-transform: translateZ(-75px) rotateX(90deg);
  transform: translateZ(0px) rotateX(90deg);

}
.oben{
  position: absolute;
/*  height: 100%;
  width: 100%;*/
  -webkit-backface-visibility: hidden;
 ...

JavaScript

$(document).on('click', function(e){
      //console.log("document klick");
      $('#category_wrapper').toggleClass('show-unten');
	});