CSS : picture instead of backface-visibility = hidden
NickName:Gullfaxi171 Ask DateTime:2012-12-23T10:23:32

CSS : picture instead of backface-visibility = hidden

I am trying to make 3D picture tables with three.js, and all is working fine, however, I would be able to have two pictures back-to-back with only 1 div :

in my element, I have a background, and I would have another picture on the other side.

Is it possible? With the property backface-visibility:hidden; I can make the background disappear on the wrong side, but how do define a picture as "background of the backface" ?

.element {
    width: 140px;
    height: 180px;
    box-shadow: 0px 0px 20px rgba(0,255,255,0.5);
    border: 1px solid rgba(127,255,255,0.25);
    cursor: default;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
}

...

var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundImage="url('img/img-"+(i+1)+".jpg')";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundPosition = "center";

Copyright Notice:Content Author:「Gullfaxi171」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/14008153/css-picture-instead-of-backface-visibility-hidden

Answers
Martijn Hols 2012-12-23T02:40:00

You need a second element for the back face. See http://css3.bradshawenterprises.com/flip/ for an example on how to implement this (and consider the example CSS3 animation a bonus).",


More about “CSS : picture instead of backface-visibility = hidden” related questions

CSS : picture instead of backface-visibility = hidden

I am trying to make 3D picture tables with three.js, and all is working fine, however, I would be able to have two pictures back-to-back with only 1 div : in my element, I have a background, and I...

Show Detail

backface-visibility:hidden bug in chrome

I've found a bug in Chrome on windows Vista: CSS3 backface-visibility:hidden doesn't work. Here is an example: jsFiddle This works fine on chrome in windows 7 and mac, but on chrome vista the bac...

Show Detail

Nested backface-visibility is not hidden

I've got a problem with "nested" backface-visibility. I would like to have a flipping div, with content on both sides. For that, I use two div flipping, each one representing a face of my "two-fac...

Show Detail

Why does setting overflow:hidden; break the backface-visibility declaration?

I have a "flippable" modal dialogue consisting of two divs (front and back): <div class="modal-dialogue"> <div class="modal-content"> <div class="front"

Show Detail

CSS: backface-visibility not working?

I'm trying to create a card flipping effect, but I can't get the backface-visibility: hidden; working. What am I doing wrong? .content { width: 100%; height: 70vh; ma

Show Detail

Why they use backface-visibility:hidden, though a flippable card work fine without it?

In many tutorial, they use backface-visibility:hidden to make a flippable card. But it(card) works fine without backface-visibility:hidden. So why they use it? Any solution. Css: .scene { ...

Show Detail

issue with backface-visibility:hidden;

I'm a begenner and trying tomake the card flip on hover (to show the back side of the card when hover), I've followed a couple videos on YouTube. I kind of got the concept of how to do it, but I ca...

Show Detail

Blurry text on transform:rotate and backface-visibility:hidden in Chrome

I'm getting blurry text on transform:rotate and backface-visibility:hidden in Chrome. For sharp edges in a rotated element I use backface-visibility:hidden. Without backface-visibility the edges o...

Show Detail

Backface-visibility:hidden; not working properly

I am too weak in designing, so practicing some css But i am stucked on backface-visibility:hidden; but don't know why its not working, its working on an class but not in another class while i have ...

Show Detail

backface-visibility: hidden not working in grid on Safari

I'm very close to having solved this problem, by nesting a 1:1 grid instead of using flex and position: absolute; however, while it seems to really, really work on Chrome and Firefox, on Safari my

Show Detail