Positioning an item over 3d transform applied breaks perspective

HTML & CSS
1

Folder with native drag and drop.

Icon structure is:


<li>
<div class="drop_mask"></div>

<div class="folder">
     <div class="front"></div>
     <div class="back">
</div>

</li>

When you dragover the folder, the front div rotates forware “opening” the folder. However, if the drop mask has a z-index applied perspective is broken on the front div transform and it appears flat. Don’t understand why a parents sibling would break the perspective. Is this a bug in CSS3 implementation?

2

We cannot guess about the cause of the problem you’ve described based on that snippit of HTML and your description. We will need a link to the site where the page is being developed so we can view the CSS as well to provide any useful help.

3

HI,

As Ron said we would need the css and html to debug but I assume you are already using ‘transform-style:preserve-3d’?

Z-index does behave differently on transformed elements due to the way that they need to be rendered when transformed and usually the transformed parent and children are treated as one block.

4

Codepen:
http://codepen.io/anon/pen/ECeAr

The odd thing is if you use the Inspector and hover over the element, it’s perspective is preserved…*just how it’s presented visually is ‘flattened’.

5

Hi,

Yes the problem is as I mentioned and that whole transformed block gets treated as one. You would need to do it like this I think:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#folder_list {
	list-style:none;
	padding:0;
	margin:0;
}
#folder_list li  {
	width: 16.6665%;
	position: relative;
	float: left;
}

#folder_list li .wrap {
	height: 200px;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	-webkit-transform: scale(1) !important;
	-moz-transform: scale(1) !important;
	-o-transform: scale(1) !important;
	transform: scale(1) !important;
	opacity: 1;
	text-align: center;
	position: relative;
	padding: 5px;
}
.folder {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
	width: 100%;
	height: 80%;
	margin: 20px 0 0 0;
}
.folder h4 {
	position: absolute;
	top: 100%;
	margin: 0;
	display: block;
	text-align: center;
	width: 100%;
	line-height: 1.125em;
	padding: .125em;
}
.folder h4 .group_specs {
	display: block !important;
	font-size: .65em;
	line-height: 1em;
}
.folder div {
	width: calc(80% - 5px);
	height: 100%;
	background-color: #93bad8;
	/* Enabling 3d space for the transforms */
  -webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/* Enabling a smooth animated transition */
  -webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
	/* Disable text seleltion on the folder */
  -webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -40%;
}
.folder div.front {
	border-radius: 5px 5px 0 0;
	border: 3px solid #92b6dd;
	-moz-transform: rotateX(-25deg);
	-webkit-transform: rotateX(-25deg);
	transform: rotateX(-25deg);
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	background: #92b6dd;
	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.35) inset;
	z-index: 10;
	font: bold 26px sans-serif;
	color: #5A88A9;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
	line-height: 115px;
	overflow: hidden;
}
.folder div.back {
	background-image: -moz-linear-gradient(top, #92b6dd 0%, #6c9cd0 85%, #588fca 100%);
	background-image: -webkit-linear-gradient(top, #92b6dd 0%, #6c9cd0 85%, #588fca 100%);
	background-image: linear-gradient(top, #92b6dd 0%, #6c9cd0 85%, #588fca 100%);
	border-radius: 0 5px 0 0;
}
.folder div.back:before {
	content: '';
	width: 40%;
	height: 10px;
	border-radius: 4px 4px 0 0;
	background-color: #92b6dd;
	position: absolute;
	top: -10px;
	left: 0px;
}
.dragover .folder div.front {
	-moz-transform: rotateX(-50deg);
	-webkit-transform: rotateX(-50deg);
	transform: rotateX(-50deg);
}
.asset_group_icon_link {
	display: block;
	text-align: left;
	height: 100%;
	color: #4582c4;
	text-decoration: none;
}
.dragover .folder div.front {
	-moz-transform: rotateX(-50deg);
	-webkit-transform: rotateX(-50deg);
	transform: rotateX(-50deg);
}
.drop_mask {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	margin:-2px;
	background:rgba(241,159,0,.25);
}
.drop_mask_z .drop_mask {
	z-index:99;
}
.dragover .drop_mask {
	display:block;
}
</style>
</head>

<body>
<ul id="folder_list">
		<li>
				<div class="drop_mask"></div>
				<div class="wrap"> <a href="#" class="asset_group_icon_link">
						<div class="folder">
								<div class="front"></div>
								<div class="back"></div>
								<h4>Folder Title</h4>
						</div>
						</a> </div>
		</li>
		<li class="dragover">
				<div class="drop_mask"></div>
				<div class="wrap"> <a href="#" class="asset_group_icon_link">
						<div class="folder">
								<div class="front"></div>
								<div class="back"></div>
								<h4>No Z Index</h4>
						</div>
						</a> </div>
		</li>
		<li class="dragover drop_mask_z">
				<div class="drop_mask"></div>
				<div class="wrap"> <a href="#" class="asset_group_icon_link">
						<div class="folder">
								<div class="front"></div>
								<div class="back"></div>
								<h4>Z Index</h4>
						</div>
						</a> </div>
		</li>
</ul>
</body>
</html>

Whether that can fit in with what you were doing remains to be seen :slight_smile: