css3 transform-style属性笔记

原创 国哥笔记  2019-03-21 11:31  阅读 417 views 次

transform-style属性定义及用法

在css中,transform-style属性是使用来指定嵌套元素是怎样在三维空间中呈现的,该属性必须和transform 属性一起使用,不然没有效果。

transform-style属性是css3中新增的属性,目前只有Firefox浏览器支持,Chrome、Safari和Opera浏览器支持替代的-webkit-transform-style属性。

transform-style属性语法格式

  1. css语法:transform-style: flat|preserve-3d;
  2. JavaScript语法:object.style.transformStyle="preserve-3d";

属性值说明

  1. flat:子元素将不保留其3D位置;
  2. preserve-3d:子元素将保留其3D位置;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 transform-style属性笔记</title>
<style type="text/css">
#div1{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">div2
  <div id="div3">div3</div>
  </div>
</div>
</body>
</html>

运行结果:

transform-style属性笔记

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-transform-style.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!
NEXT:已经是最新一篇了

发表评论


表情