4 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 11 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

saw the below in a CSS component source code :

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
         -o-transition:      -o-transform .6s ease-in-out;
            transition:         transform .6s ease-in-out;
 
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000;
            perspective: 1000;
  }

what does the line ::

@media all and (transform-3d), (-webkit-transform-3d)

mean and is that valid css ??

Thank you.

Gautam.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi gautamz07, Yes it is valid

Hi gautamz07,
Yes it is valid but probably still poorly supported.
It is checking for css 3d transform support.
http://www.quirksmode.org/css/tests/mediaqueries/animation.html

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 11 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Tony ! thanks

Thanks alot tony , that was of great Help ! .

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 11 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

One more question ::

is the below media query ::

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    }
 
  }

equal to ::

@media all and (transform-3d) {
  .carousel-inner > .item {
    }
 
  }
 
@media all and (-webkit-transform-3d) {
  .carousel-inner > .item {
   }
 
}

Thanks ! .

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Yes they look equal.

Yes they look equal.