Html 动画窗口关闭“；X"；旋转而不是旋转

我创建了一个模态窗口，我希望右上角的窗口关闭x，以便在按下时进行动画和旋转。相反，它在基线上旋转，就像它在下降一样，而不是旋转。如果有人能看看我的代码，看看我忽略了什么，我将不胜感激。提前谢谢

var modal=document.getElementById（“myModal”）；
var btn=document.getElementById（“myBtn”）；
var span=document.getElementsByClassName（“关闭”）[0]；
btn.onclick=函数（）{
modal.style.display=“块”；
}
span.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

.modal{
显示：无；
位置：固定；
z指数：100；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#E4E8F1；
利润率：10%自动；
填充：20px；
边框：1px实心#888；
宽度：50%；
-moz边界半径：25px；
-webkit边界半径：25px；
-ms边界半径：25px；
边界半径：15px；
}
.modal content>div{
背景色：#FFF；
-moz边界半径：25px；
-webkit边界半径：25px；
-ms边界半径：25px；
边界半径：15px；
填充物：5px；
边框：1px实心#CC6600；
}
.结束{
宽度：30px；
高度：30px；
填充物：5px；
显示：内联块；
浮动：对；
利润上限：-20px；
右边距：-20px；
过渡：缓解0.25秒全部；
-webkit转换：翻译（50%，-50%）；
转换：翻译（50%，-50%）；
边界半径：1000px；
背景：rgba（0,0,0,0.8）；
字体系列：Arial，无衬线；
字体大小：20px；
文本对齐：居中；
线高：100%；
颜色：#fff；
}
.关闭：悬停{
-webkit变换：平移（50%，-50%）旋转（180度）；
变换：平移（50%，-50%）旋转（180度）；
背景：rgba（0,0,0,0.8）；
文字装饰：无；
颜色：#999；
光标：指针；
}

订购信息
x
订购信息

如需更多信息或订购，请发送书面请求，包括姓名、地址和付款（如需要）：

南卡罗来纳州交通部
工程出版物
注意：
邮政信箱
南卡罗来纳州哥伦比亚市
电话：（000）000-0000
传真：（000）000-0000

物品可在南卡罗来纳州哥伦比亚公园街955号SCDOT总部大楼工程出版物销售中心的柜台购买
SCDOT将接受现金、支票（支付给SCDOT）、汇票（支付给SCDOT）和信用卡（仅限Visa&Mastercard）。必须先收到付款，然后才能发货
协助技术人员和工程师在编制SCDOT施工项目计划时选择所需的设计标准

你可以试试这个方法

我基本上把X和其他东西隔离了

<span class="close"><span class="x">x</span></span>

---

你可以试试这个方法

我基本上把X和其他东西隔离了

<span class="close"><span class="x">x</span></span>

---

首先，我建议不要使用字母“x”作为结束符，而是使用更常见的乘法符号

×

更改了关闭按钮的位置，以使用

位置：绝对而不是使用转换

从关闭按钮中删除了浮动：右

添加到父模态内容

位置：相对


var modal=document.getElementById（“myModal”）；
var btn=document.getElementById（“myBtn”）；
var span=document.getElementsByClassName（“关闭”）[0]；
btn.onclick=函数（）{
modal.style.display=“块”；
}
span.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
.modal{
显示：无；
位置：固定；
z指数：100；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#E4E8F1；
利润率：10%自动；
填充：20px；
边框：1px实心#888；
宽度：50%；
-moz边界半径：25px；
-webkit边界半径：25px；
-ms边界半径：25px；
边界半径：15px；
位置：相对位置；
}
.modal content>div{
背景色：#FFF；
-moz边界半径：25px；
-webkit边界半径：25px；
-ms边界半径：25px；
边界半径：15px；
填充物：5px；
边框：1px实心#CC6600；
}
.结束{
宽度：30px；
高度：30px；
填充物：5px；
显示：内联块；
过渡：缓解0.25秒全部；
边界半径：30px；
背景：rgba（0,0,0,0.8）；
字体系列：Arial，无衬线；
字体大小：20px；
文本对齐：居中；
线高：30px；
颜色：#fff；
位置：绝对位置；
顶部：-20px；
右：-20px；
}
.关闭：悬停{
-webkit变换：平移（50%，-50%）旋转（180度）；
变换：旋转（180度）；
背景：rgba（0,0,0,0.8）；
文字装饰：无；
颜色：#999；
光标：指针；
}

订购信息
&时代；
订购信息

如需更多信息或订购，请发送书面请求，包括姓名、地址和付款（如需要）：

南卡罗来纳州交通部
工程出版物
注意：
寄出