CODEWITHSUNDEEP
csscss-transformsperspective
David Braun
David Braun

Reputation: 409

Having trouble with perspective and backface-visibility

I'd like to implement a "funny" Navigation into my website, with perspective and stuff, but, as a beginner, I look at a brick-wall.

I just don't find a way to get the line backface-visibility: hidden; working.

My goal is:

Front: Front-Side Back: intended BACK-SIDE

The result with the code below is (in rotation-state): resulting "back-side"

There are plenty of working sample-codes on CodePen, and I tried to figure it out without success. Weird things happened, but never did the backface-visibility of an object get its hidden-state.

I used a great template to work on (designmodo.com) and trimmed it down to this:

HTML

<body>
  <div class="poster">
    <div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
    <div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
  </div>
</body>

CSS

body {
  transform-style:preserve-3d;
  transform:perspective(1500px);
}

.poster {
  width:510px;
  height:310px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-156px 0 0 -256px;
  border-radius:4px;
  box-shadow:0 45px 100px rgba(0,0,0,0.4);
}

.layer-1, .layer-2 {
  position:absolute;
  top:0;
  left:0;
  transform:translateZ(10px);
  backface-visibility:hidden;
}

.layer-2 {
  transform:rotateY(180deg);
}

Please see my pen: https://codepen.io/herrbraun/pen/JKroYa (the rotation is there only to show the not-working blackface-visibility –– once it works, it'll be interactive)

If somebody could have an eye on what I've got so far, I don't see any typos or syntax-errors, but – what makes the CSS "fail"?

Upvotes: 0

Views: 954

Answers (2)

vals
vals

Reputation: 64174

First of all, you have a syntax error:

.layer-1, layer-2 {

should be

.layer-1, .layer-2 {

Also, for this setup to work, you need to set

.poster {
    transform-style: preserve-3D;
}

because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.

Your snippet corrected

body {
	transform-style:preserve-3d;
	transform:perspective(1500px);
}
@keyframes rotating {
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}

.poster {
    animation: rotating 10s linear infinite;
}

.poster {
	width:510px;
	height:310px;
	position:absolute;
	top:50%;
	left:50%;
	margin: 0 0 0 -256px;
	border-radius:4px;
	box-shadow:0 45px 100px rgba(0,0,0,0.4);
  transform-style: preserve-3D; /* new */
}

.poster .shine {
	position:absolute;
	top:0;
	left:0;
	background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
	background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%);
	z-index:100;
}

.layer-1, .layer-2 {
	position:absolute;
	top:0;
	left:0;
	transform: translateZ(10px);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: .1s;
	transition: .1s;
}
.layer-1 {background-color: blue; color:white;}
.layer-2 {
  background-color: red;
	transform:rotateY(180deg);
}
  <div class="poster">
  <div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>
  <div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div>
</div>

Upvotes: 2

jlynch630
jlynch630

Reputation: 697

Try setting the animation to .layer-1 and .layer-2 instead of .poster and set the animation-delay of .layer-2 to -5s

Upvotes: 1

Related Questions