translate，scale，rotate如何画国旗

三个三角形组成一个五角星，利用translate，scale，rotate旋转缩小控制距离. 三角形顶角108等腰三角形底角36度。

-----------------------代码--------------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
*{
margin: 0 auto;
}
.div1{
margin: 0 auto;
width: 900px;
height: 600px;
background-color: red;
}
.div2>.angle1{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,134px)rotate(107deg);
-moz-transform:translate(-280px,134px)rotate(107deg);
-o-transform:translate(-280px,134px)rotate(107deg);
transform:translate(-280px,134px)rotate(107deg);
}
.div2>.angle2{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,72px)rotate(-180deg);
-moz-transform:translate(-280px,72px)rotate(-180deg);
-o-transform:translate(-280px,72px)rotate(-180deg);
transform:translate(-280px,72px)rotate(-180deg);
}
.div2>.angle3{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-283px,15px)rotate(255deg);
-moz-transform:translate(-283px,15px)rotate(255deg);
-o-transform:translate(-283px,15px)rotate(255deg);
transform:translate(-283px,15px)rotate(255deg);
}
.div3{
-webkit-transform:translate(-58px,-215px) scale(0.25) rotate(15deg);
-moz-transform:translate(-58px,-215px) scale(0.25) rotate(15deg);
-o-transform:translate(-58px,-215px) scale(0.25) rotate(15deg);
transform:translate(-58px,-215px) scale(0.25) rotate(15deg);
}
.div3>.angle1{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,134px)rotate(107deg);
-moz-transform:translate(-280px,134px)rotate(107deg);
-o-transform:translate(-280px,134px)rotate(107deg);
transform:translate(-280px,134px)rotate(107deg);
}
.div3>.angle2{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,72px)rotate(-180deg);
-moz-transform:translate(-280px,72px)rotate(-180deg);
-o-transform:translate(-280px,72px)rotate(-180deg);
transform:translate(-280px,72px)rotate(-180deg);
}
.div3>.angle3{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-283px,15px)rotate(255deg);
-moz-transform:translate(-283px,15px)rotate(255deg);
-o-transform:translate(-283px,15px)rotate(255deg);
transform:translate(-283px,15px)rotate(255deg);
}
.div4{
-webkit-transform:translate(-24px,-377px) scale(0.25) rotate(-29deg);
-moz-transform:translate(-24px,-377px) scale(0.25) rotate(-29deg);
-o-transform:translate(-24px,-377px) scale(0.25) rotate(-29deg);
transform:translate(-24px,-377px) scale(0.25) rotate(-29deg);
}
.div4>.angle1{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,134px)rotate(107deg);
-moz-transform:translate(-280px,134px)rotate(107deg);
-o-transform:translate(-280px,134px)rotate(107deg);
transform:translate(-280px,134px)rotate(107deg);
}
.div4>.angle2{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,72px)rotate(-180deg);
-moz-transform:translate(-280px,72px)rotate(-180deg);
-o-transform:translate(-280px,72px)rotate(-180deg);
transform:translate(-280px,72px)rotate(-180deg);
}
.div4>.angle3{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-283px,15px)rotate(255deg);
-moz-transform:translate(-283px,15px)rotate(255deg);
-o-transform:translate(-283px,15px)rotate(255deg);
transform:translate(-283px,15px)rotate(255deg);
}
.div5{
-webkit-transform:translate(-10px,-440px) scale(0.25) rotate(0deg);
-moz-transform:translate(-10px,-440px) scale(0.25) rotate(0deg);
-o-transform:translate(-10px,-440px) scale(0.25) rotate(0deg);
transform:translate(-10px,-440px) scale(0.25) rotate(0deg);
}
.div5>.angle1{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,134px)rotate(107deg);
-moz-transform:translate(-280px,134px)rotate(107deg);
-o-transform:translate(-280px,134px)rotate(107deg);
transform:translate(-280px,134px)rotate(107deg);
}
.div5>.angle2{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,72px)rotate(-180deg);
-moz-transform:translate(-280px,72px)rotate(-180deg);
-o-transform:translate(-280px,72px)rotate(-180deg);
transform:translate(-280px,72px)rotate(-180deg);
}
.div5>.angle3{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-283px,15px)rotate(255deg);
-moz-transform:translate(-283px,15px)rotate(255deg);
-o-transform:translate(-283px,15px)rotate(255deg);
transform:translate(-283px,15px)rotate(255deg);
}
.div6{
-webkit-transform:translate(-49px,-517px) scale(0.25) rotate(17deg);
-moz-transform:translate(-49px,-517px) scale(0.25) rotate(17deg);
-o-transform:translate(-49px,-517px) scale(0.25) rotate(17deg);
transform:translate(-49px,-517px) scale(0.25) rotate(17deg);
}
.div6>.angle1{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,134px)rotate(107deg);
-moz-transform:translate(-280px,134px)rotate(107deg);
-o-transform:translate(-280px,134px)rotate(107deg);
transform:translate(-280px,134px)rotate(107deg);
}
.div6>.angle2{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-280px,72px)rotate(-180deg);
-moz-transform:translate(-280px,72px)rotate(-180deg);
-o-transform:translate(-280px,72px)rotate(-180deg);
transform:translate(-280px,72px)rotate(-180deg);
}
.div6>.angle3{
width: 0px;
height:0px;
border-top: 0px solid transparent;
border-bottom: 60px solid yellow;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
-webkit-transform:translate(-283px,15px)rotate(255deg);
-moz-transform:translate(-283px,15px)rotate(255deg);
-o-transform:translate(-283px,15px)rotate(255deg);
transform:translate(-283px,15px)rotate(255deg);
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="div3">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="div4">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="div5">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
<div class="div6">
<div class="angle1"></div>
<div class="angle2"></div>
<div class="angle3"></div>
</div>
</div>
</body>
</html>

posted @ 2017-03-04 21:30 Lily.L 阅读(216) 评论(0) 收藏举报

刷新页面返回顶部

Lily.L

translate，scale，rotate如何画国旗

公告