css求大神给加一下注释解释，谢谢~谢谢

Posted 2023-03-14

.menuHolder ul ul
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;

.menuHolder li.s2:nth-of-type(3) > a
background: #bbb;
-webkit-transform: rotate(30deg);
-moz-transform: rotateZ(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

.menuHolder .a6 li:nth-of-type(6) > a
background: #444;
-webkit-transform: rotate(75deg);
-moz-transform: rotateZ(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);

.menuHolder li.s1:hover ul.p2
-webkit-transform: rotate(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);

.menuWindow
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 100;
-webkit-transition: 0s 1s;
-moz-transition: 0s 1s;
-ms-transition: 0s 1s;
-o-transition: 0s 1s;
transition: 0s 1s;

.menuHolder:hover .menuWindow
-webkit-transition: 0s 0s;
-moz-transition: 0s 0s;
-ms-transition: 0s 0s;
-o-transition: 0s 0s;
transition: 0s 0s;

.menuHolder span
-webkit-transform: rotate(5deg);
-moz-transform: rotateZ(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);

<style>
/* 经常发现很多相同的属性写了很多遍，只是前叙不同，这是为了兼容更多浏览器的用法，前叙都是这些浏览器专用的私有属性 
   -webkit- webkit类浏览器专用，苹果浏览器，谷歌浏览器
   -moz- moz类浏览器专用，火狐浏览器
   -ms- IE类浏览器专用，IE浏览器
   -o- webkit类浏览器专用，opera浏览器 */
.menuHolder ul ul 
/* transform-origin:x y  设置旋转元素的基点位置(通俗就是从x y z坐标为起点，一般会跟住旋转rotate一并使用) 这个是2D旋转x y，3D旋转则是x y z */
-webkit-transform-origin: 0 0; 
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* transform:rotate() 设置旋转元素旋转的角度单位是deg，看成度即可比如旋转45度就是transform:rotate(45deg) */
-webkit-transform: rotate(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
/* transition: property duration timing-function delay; 
   transition设置元素动画效果
   property默认是all，对所有元素起作用；
   duration规定完成过渡效果需要多少秒或毫秒，默认0，也就是默认不过渡；
   timing-function规定速度效果的速度曲线，如ease-in-out先快后慢
   delay动画延迟多长时间才开始，单位秒或毫秒 */
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;

.menuHolder li.s2:nth-of-type(3) > a 
/* background，设置元素背景，#bbb为颜色值，此处设置是背景色为#bbb（浅灰色） */
background: #bbb;
-webkit-transform: rotate(30deg);
-moz-transform: rotateZ(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

.menuHolder .a6 li:nth-of-type(6) > a 
background: #444;
-webkit-transform: rotate(75deg);
-moz-transform: rotateZ(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);

.menuHolder li.s1:hover ul.p2 
-webkit-transform: rotate(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);

.menuWindow 
/* 在此元素内的所有元素无论多大也不会溢出，超过的部分会被隐藏 */
overflow: hidden;
/* 此元素受绝对定位影响，通过x y坐标来定位，如left ，top ，right ，bottom（只能同时使用left/right top或left/right bottom） */
position: absolute;
left: 0;
top: 0;
/* 元素层块的先后，数字越大的显示越前，如有一个z-index：99的层块，一个z-index：100的层块，100层会覆盖99层 */
z-index: 100;
-webkit-transition: 0s 1s;
-moz-transition: 0s 1s;
-ms-transition: 0s 1s;
-o-transition: 0s 1s;
transition: 0s 1s;

.menuHolder:hover .menuWindow 
-webkit-transition: 0s 0s;
-moz-transition: 0s 0s;
-ms-transition: 0s 0s;
-o-transition: 0s 0s;
transition: 0s 0s;

.menuHolder span 
-webkit-transform: rotate(5deg);
-moz-transform: rotateZ(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);

</style>

参考技术A 这都是css3的标签
transform-origin：改变被转换元素的位置
transform: rotate：旋转
transition：过渡
-webkit-、-moz-、-o-、-ms-这四个前缀
-ms代表ie内核识别码
-moz代表火狐内核识别码
-webkit代表谷歌内核识别码
-o代表欧朋【opera】内核识别码