backface-visibility в CSS


CSS3 Свойство backface-visibility

Пример

Спрятать заднюю сторону повернутого элемента div:

div
<
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Safari */
>

Попробуйте сами »

Поддержка Браузерами

Свойство backface-visibility поддерживается только в Safari.

Определение и Использование

Свойство backface-visibility определяет, должен ли элемент быть видимым, когда его лицевая часть не смотрит на экран.

Это свойство полезно, когда элемент повернут и вы не хотите видеть его заднюю сторону.

CSS backface-visibility

The CSS backface-visibility property is used to determine whether the back of the element is visible when it has been rotated and its back is facing the user.

It accepts a value of either visible or hidden , which results in the element’s backface being either visible or hidden.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information


In HTML, a transformable element is either:

  • a block-level or atomic inline-level element
  • or whose CSS display property computes to table-row , table-row-group , table-header-group , table-footer-group , table-cell , or table-caption

In SVG, a transformable element is an element which has the attributes transform , patternTransform or gradientTransform .

Inherited? No Media Visual Computed Value As specified.

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The backface-visibility property is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.


This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

Илон Маск рекомендует:  Что такое код asp logextfilebytessent

You can also use Autoprefixer with preprocessors such as Less and Sass.

backface-visibility

Easily manage projects with monday.com

The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the «front» of an element no longer faces the screen. For instance, this would flip an element away from the screen:

It will look as if you picked it up with a spatula and flipped it over like a pancake. That’s because the default for backface-visibility is visible . Instead of it being visible, you could hide it.

See the Pen FjwGA by Chris Coyier (@chriscoyier) on CodePen.

This is useful when doing 3D effects. For instance:

Works properly

Problematic in WebKit because backface-visibility not h >

This isn’t problematic in Firefox for whatever reason, although the property works the same way.

Prefixes

Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility .

Values


  • visible (default) — the element will always be visible even when not facing the screen.
  • hidden — the element is not visible when not facing the screen.
  • inherit — the property will gets its value from the its parent element.
  • initial — sets the property to its default, which is visible .

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
12* 15* 10* 11 12 4*

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
3.2* 46 No 3* 78 68

Comments

This is very cool for menu designs.

Finally some other browsers have begun implementing this cool feature that’s been around in safari for a while now.
I’ve noticed this property doesn’t work on elements that have been absolutely positioned (in chrome anyway).

Is there anyway you could change the THICKNESS of the actual div ? to show that the div isn’t flat? like a Depth? I think that would be really cool!


but its still cool.

Kind of. You’d have to use additional elements as sides (front element + 4 side elements + back element)

Hey, very nice article. Helped me in some cases when i used this css rule.

But I am in big dilemma regarding this.

For last many days, i have been struggling canvas drawing operation(different shapes) in sencha touch(javascript) application.

The drawing of lines where a bit slow while the finger moved ahead of the line while drawing it in the IPAD in canvas.

I was not able to figure out that what made this application little slow. Then suddenly, when i added backface-visiblity: visible, propery in css of the body, the drawing become faster as it should be.

But what is the importance of this css in relation to canvas drawing, as there is no animation going on while drawing something on canvas?

Webkit backface visibility not working

I’m building a simple example to flip a card using the -webkit-transform: rotateY property.

It was working fine a couple of days ago, but all of a sudden it stop working. The effect still works, but when I hover over the card, the front side should disappear to make the back side visible. for this I’m using the -webkit-backface-visibility: hidden property. But it seems that is not working anymore in chrome (Both in the stable and the nightly build version)

Here is the code in case I’m doing something terrible bad

I came to this conclusion because I made a couple of simple examples using only a rotated div with a simple text on it, the backface hidden property and it was still visible. Also, this example uses this property and also stopped working. So, to sum up, my question is, does anyone else have problem with this property or is there a problem with my code?

backface-visibility

The backface-visibility property determines whether or not the “back” side of a transformed element is visible when facing the viewer.

The back face of an element usually has a transparent background, letting, when visible, a mirror image of the front face be displayed.

It is used in conjunction with CSS transforms when an element is rotated in three-dimensional space so that its front face no longer faces towards the screen, and its back face is facing it instead. For example, applying a rotation about the y-axis of 180° (for instance) would cause the back side of the element to face the viewer. It has no effect on two-dimensional transforms.


This property is useful when you place two elements back-to-back, as you would to create a playing card. When the card is flipped, you wouldn’t want the content of the front face to be visible through the back face. Without this property, the front and back elements could switch places at times during an animation to flip the card. It is also useful when creating cubes in the three-dimensional space. See the Live Demo section below for a live example.

Official Syntax

  • Syntax:
  • Initial: visible
  • Applies To:transformable elements
  • Animatable: no
  • Values

    Examples

    In this example, we’re going to create a card flip example using the backface-visibility property. The markup consists of a container that contains two elements that we’re going to stack on top of each other, back-to-back. We’re going to apply the backface-visibility property to these two elements, and then when the container is hovered, the two elements are going to be rotated in three-dimensional space, thus showing the “other side of the card”. In the live demo below, you can see this example live.

    The CSS with comments explaining each step is the following:

    Check out the live demo in the next section.


    Live Demo

    Hover over the following box in the following example to see it flip in a card-like effect. Try changing the backface-visibility value to visible to see how it affects the transformation.

    The following example shows two cubes in three-dimensional space. The first one on the left shows the cube with backface-visibility: visible , and the second one on the right shows the cube with backface-visibility: hidden .

    Browser Support

    CSS3 3D Transforms

    Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

    CSS backface-visibility Property

    Example

    Hide and show the back face of two rotated

    #div1 <
    backface-visibility: hidden;
    >

    #div2 <
    backface-visibility: visible;
    >

    Definition and Usage

    The backface-visibility property defines whether or not the back face of an element should be visible when facing the user.

    The back face of an element is a mirror image of the front face being displayed.

    This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.

    To better understand this property, view a demo.

    Default value: visible
    Inherited: no
    Animatable: no. Read about animatable
    Version: CSS3
    JavaScript syntax: object.style.backfaceVisibility=»hidden» Try it


    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

    CSS3 backface-visibility Property

    Description

    The backface-visibility CSS property determines whether or not the «back» side of a transformed element is visible when facing the user.

    The following table summarizes the usages context and the version history of this property.

    Default value: visible
    Applies to: Transformable elements
    Inherited: No
    Animatable: No. See animatable properties.
    Version: New in CSS3

    Syntax

    The syntax of the property is given with:

    backface-visibility : visible | hidden | initial | inherit

    The example below shows the backface-visibility property in action.

    Example

    Note: The backface-visibility property is very useful for creating animations like revolving coin or card flipping, where two different images (i.e. front and back side) are blend together to create better 3D rotation effect.

    Property Values

    The following table describes the values of this property.


    Value Description
    visible Specifies that the back face is visible, allowing the front face to be displayed mirrored. This is default value.
    hidden Specifies that the back face is not visible, hiding the front face.
    initial Sets this property to its default value.
    inherit If specified, the associated element takes the computed value of its parent element backface-visibility property.

    Browser Compatibility

    The backface-visibility property is supported in all major modern browsers.

    The CSS Backface-Visibility Property

    Contents

    What does backface visibility mean?

    The CSS backface-visibility property is used to define if the backface of the element should be visible to the user when it’s not facing the screen:

    You should use this property when you need to be able to rotate an element, but you want its back to stay invisible. As 2D elements have no perspective and thus cannot be rotated, CSS backface-visibility only works on 3D elements.

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 534037f7499890bd • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    CSS3 Свойство backface-visibility

    Пример

    Спрятать заднюю сторону повернутого элемента div:

    div
    <
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden; /* Safari */
    >

    Попробуйте сами »

    Поддержка Браузерами

    Свойство backface-visibility поддерживается только в Safari.

    Определение и Использование

    Свойство backface-visibility определяет, должен ли элемент быть видимым, когда его лицевая часть не смотрит на экран.

    Это свойство полезно, когда элемент повернут и вы не хотите видеть его заднюю сторону.

    Илон Маск рекомендует:  Тег option
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL