老师，请检查一下！
来源：6-1 transform-style
好狗边上飘314
2019-10-18 11:33:59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scale</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{width:200px;height:200px;background:#abcdef;margin:auto;position:relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;}
div > .border{width:180px;height:180px;border:1px solid red;border-radius:50%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto auto;transform:rotateX(65deg);}
.main{border-top:80px solid transparent;border-right:20px solid transparent;border-bottom:40px solid transparent;border-left:20px solid blue;position:absolute;top:50%;left:50%;margin-top:-60px;}
</style>
</head>
<body>
<div class="box">
<div class="border"></div>
<div class="main"></div>
</div>
</body>
</html>
老师请帮忙检查看一下，我模拟做了一个小图片。想要达到的效果是红色的圆环绕蓝色的三角形。三角形有一个嵌套在圆里的效果，可是为什么圆的后半边就看不见了呢。。。
写回答
1回答
-
好帮手慕粉
2019-10-18
同学你好，是因为你给父元素设置了背景色哦，transform-style属性设置在父元素中，会高于任何嵌套的子元素，将父元素的背景色去掉就好了，同学可以仔细看下视频，老师的背景色也并未加给父元素哦。
希望我的回答能够帮助到你，望采纳，祝学习愉快！
0
相似问题