老师请解答一下下面的问题
来源：2-13 编程练习
qq_慕慕0057983
2022-03-21 12:31:57
问题描述：
1、小星星的角度怎么调整，为什么调整rotate是平移的效果
2、代码中是否有错误的地方，实现效果有什么问题
3、要实现类型布局的效果。怎么准确的把握旋转和移动的
相关代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin:0;
padding:0;
}
.box{
/* position: relative; */
width:800px;
height:600px;
background-color:red;
overflow:hidden;
}
.box div:nth-child(1){
position: relative;
margin-top:120px;
margin-left:50px;
width: 0;
height: 0;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(32deg);
}
.box div:nth-child(1)::before{
content: '';
position: absolute;
width: 0;
height: 0;
top:-44px;
left: -45px;
display: block;
border-left: 20px solid transparent;
border-bottom: 60px solid gold;
border-right: 20px solid transparent;
transform: rotate(-32deg);
}
.box div:nth-child(1)::after{
content: '';
position: absolute;
width: 0;
height: 0;
top:3px;
left: -80px;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(-66deg);
}
.box div:nth-child(2){
margin-top:90px;
margin-left:-135px;
width: 0;
height: 0;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(50deg) scale(0.5) translateX(100px) translateY(-800px) ;
}
.box div:nth-child(2)::before{
content: '';
position: absolute;
width: 0;
height: 0;
top:-44px;
left: -45px;
display: block;
border-left: 20px solid transparent;
border-bottom: 60px solid gold;
border-right: 20px solid transparent;
transform: rotate(-32deg);
}
.box div:nth-child(2)::after{
content: '';
position: absolute;
width: 0;
height: 0;
top:3px;
left: -80px;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(-66deg);
}
.box div:nth-child(3){
margin-top:90px;
margin-left:-240px;
width: 0;
height: 0;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(54deg) scale(0.5) translateX(150px) translateY(-1160px) ;
}
.box div:nth-child(3)::before{
content: '';
position: absolute;
width: 0;
height: 0;
top:-44px;
left: -45px;
display: block;
border-left: 20px solid transparent;
border-bottom: 60px solid gold;
border-right: 20px solid transparent;
transform: rotate(-32deg);
}
.box div:nth-child(3)::after{
content: '';
position: absolute;
width: 0;
height: 0;
top:3px;
left: -80px;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(-66deg);
}
.box div:nth-child(4){
margin-top:75px;
margin-left:-240px;
width: 0;
height: 0;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(52deg) scale(0.5) translateX(150px) translateY(-1160px) ;
}
.box div:nth-child(4)::before{
content: '';
position: absolute;
width: 0;
height: 0;
top:-44px;
left: -45px;
display: block;
border-left: 20px solid transparent;
border-bottom: 60px solid gold;
border-right: 20px solid transparent;
transform: rotate(-32deg);
}
.box div:nth-child(4)::after{
content: '';
position: absolute;
width: 0;
height: 0;
top:3px;
left: -80px;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(-66deg);
}
.box div:nth-child(5){
margin-top:75px;
margin-left:-300px;
width: 0;
height: 0;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(47deg) scale(0.5) translateX(150px) translateY(-1160px) ;
}
.box div:nth-child(5)::before{
content: '';
position: absolute;
width: 0;
height: 0;
top:-44px;
left: -45px;
display: block;
border-left: 20px solid transparent;
border-bottom: 60px solid gold;
border-right: 20px solid transparent;
transform: rotate(-32deg);
}
.box div:nth-child(5)::after{
content: '';
position: absolute;
width: 0;
height: 0;
top:3px;
left: -80px;
display: block;
border-left: 80px solid transparent;
border-bottom: 50px solid gold;
border-right: 80px solid transparent;
transform: rotate(-66deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div>️</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>写回答
1回答
-
樱桃小胖子
2022-03-21
同学你好，关于同学的问题，解答如下:
1、小星星的角度怎么调整，为什么调整rotate是平移的效果
translate属性会受到scale、rotate、skew属性的影响，因此会出现调整rotate是平移的效果，建议参考如下修改：
备注：这里以box div:nth-child(2){}为例，其他的同学需要自行修改并调整参数
2、代码中是否有错误的地方，实现效果有什么问题
transform属性需要设置兼容性，即添加浏览器前缀
3、要实现类型布局的效果。怎么准确的把握旋转和移动的
效果的实现都是先设置大致位置，然后一步一步调试出来的，并不能精准把我旋转和移动。
祝学习愉快！
0
相似问题