transform-style属性怎么用

2024-01-17 15:29 小编

       CSS3transform-style属性

 

  作用:transform-style属性规定如何在3D空间中呈现被嵌套的元素。

 

  语法:

 

  transform-style:flat|preserve-3d;

 

  flat:子元素将不保留其3D位置。

 

  preserve-3d:子元素将保留其3D位置。

 

  注:该属性必须与transform属性一同使用。

 

  CSS3transform-style属性的使用示例

 

  <!DOCTYPEhtml>

 

  <html>

 

  <head>

 

  <style>

 

  #div1

 

  {

 

  position:relative;

 

  height:200px;

 

  width:200px;

 

  margin:100px;

 

  padding:10px;

 

  border:1pxsolidblack;

 

  }

 

  #div2

 

  {

 

  padding:50px;

 

  position:absolute;

 

  border:1pxsolidblack;

 

  background-color:red;

 

  transform:rotateY(60deg);

 

  transform-style:preserve-3d;

 

  -webkit-transform:rotateY(60deg);/*SafariandChrome*/

 

  -webkit-transform-style:preserve-3d;/*SafariandChrome*/

 

  }

 

  #div3

 

  {

 

  padding:40px;

 

  position:absolute;

 

  border:1pxsolidblack;

 

  background-color:yellow;

 

  transform:rotateY(80deg);

 

  -webkit-transform:rotateY(-60deg);/*SafariandChrome*/

 

  }

 

  </style>

 

  </head>

 

  <body>

 

  <divid="div1">

 

  <divid="div2">HELLO

 

  <divid="div3">YELLOW</div>

 

  </div>

 

  </div>

 

  </body>

 

  </html>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码