导航菜单和变换不起作用

Question

我正在为我的网站添加一个折叠导航菜单，由于某种原因，Transform无法工作，它在我的代码编辑器（Espresso）中也无法工作，在Safari中也无法运行，这是一个未知属性。不确定我的代码中缺少了什么，它在Chrome中运行得很好。

以下是我的基本代码：

nav {
    background-color: #FDE74C;
    padding:10px;
    padding-left: 0;
    -moz-box-shadow: 0 0 5px #fbfbd4;
    box-shadow: 0 0 5px #fbfbd4;
}
#menuToggle {
  display: block;
  position: relative;
  top: 0;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#menuToggle input {
  display: block;
  width: 33px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
}
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  -webkit-transform-origin: 4px 0px;
  transform-origin: 4px 0px;
  -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;
  transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
 }
#menuToggle span:first-child {
-webkit-transform-origin: 0% 0%;
 transform-origin: 0% 0%;
 }
#menuToggle span:nth-last-child(2) {
-webkit-transform-origin:0% 0%;
 transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
  opacity: 1;
  -webkit-transform:rotate(45deg) translate(-2px, -1px);
   transform: rotate(45deg) translate(-2px, -1px);
   background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
  transform: rotate(0deg) scale(0.2, 0.2);
  }
#menuToggle input:checked ~ span:nth-last-child(2) {
  opacity: 1;
  -webkit-transform: rotate(-45deg) translate(0, -1px);
   transform: rotate(-45deg) translate(0, -1px);
 }
#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  -webkit-transform-origin: 0% 0%;
  transform-orgin: 0% 0%;
  -webkit-transform:translate (-100%,0);
   transform: translate(-100%,0);
   -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
   transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
   }
#menu li {
  padding: 10px 0;
  font-size: 22px;
}
#menuToggle input:checked ~ ul {
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
 opacity: 1;
}

Answer 1

  
      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    } 
    
    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }
    
    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }
    
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;  
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;  
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }
    
    #menuToggle span:first-child { 
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
    
     }
    
    #menuToggle span:nth-last-child(2) { 
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%; 
    
    }
    
    
    
    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);  
      transform: rotate(0deg) scale(0.2, 0.2);
      
      }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);
    
     }
    
    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);  
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);  
       }
    
    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }
    
    
    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);  
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>	
    		</div>	
    	</nav>
              

  
      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    } 
    
    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }
    
    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }
    
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;  
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;  
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }
    
    #menuToggle span:first-child { 
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
    
     }
    
    #menuToggle span:nth-last-child(2) { 
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%; 
    
    }
    
    
    
    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);  
      transform: rotate(0deg) scale(0.2, 0.2);
      
      }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);
    
     }
    
    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);  
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);  
       }
    
    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }
    
    
    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);  
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>	
    		</div>	
    	</nav>
              

  
      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    } 
    
    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }
    
    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }
    
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;  
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;  
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }
    
    #menuToggle span:first-child { 
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
    
     }
    
    #menuToggle span:nth-last-child(2) { 
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%; 
    
    }
    
    
    
    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);  
      transform: rotate(0deg) scale(0.2, 0.2);
      
      }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);
    
     }
    
    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);  
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);  
       }
    
    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }
    
    
    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);  
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>	
    		</div>	
    	</nav>
              

  
      nav {
    	background-color: #FDE74C;
    	padding:10px;
    	padding-left: 0;
    	-moz-box-shadow: 0 0 5px #fbfbd4;
    	box-shadow: 0 0 5px #fbfbd4;
    } 
    
    #menuToggle {
      display: block;
      position: relative;
      top: 0;
      left: 50px;
      z-index: 1;
      -webkit-user-select: none;
      user-select: none;
    }
    
    #menuToggle input {
      display: block;
      width: 33px;
      height: 28px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
    }
    
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      -webkit-transform-origin: 4px 0px;  
      transform-origin: 4px 0px;
      -webkit-transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),  opacity 0.55s ease;  
      transition:-webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),opacity 0.55s ease;
     }
    
    #menuToggle span:first-child { 
    -webkit-transform-origin: 0% 0%;
     transform-origin: 0% 0%;
    
     }
    
    #menuToggle span:nth-last-child(2) { 
    -webkit-transform-origin:0% 0%;
     transform-origin: 0% 100%; 
    
    }
    
    
    
    #menuToggle input:checked ~ span {
      opacity: 1;
      -webkit-transform:rotate(45deg) translate(-2px, -1px);
       transform: rotate(45deg) translate(-2px, -1px);
       background: #232323;
    }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      -webkit-transform: rotate(0deg) scale(0.2, 0.2);  
      transform: rotate(0deg) scale(0.2, 0.2);
      
      }
    
    
    
    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      -webkit-transform: rotate(-45deg) translate(0, -1px);
       transform: rotate(-45deg) translate(0, -1px);
    
     }
    
    #menu {
      position: absolute;
      width: 300px;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      background: #ededed;
      -webkit-transform-origin: 0% 0%;
      transform-orgin: 0% 0%;
      -webkit-transform:translate (-100%,0);
       transform: translate(-100%,0);  
       -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
       transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);  
       }
    
    #menu li {
      padding: 10px 0;
      font-size: 22px;
    }
    
    
    #menuToggle input:checked ~ ul {
    -webkit-transform: scale(1.5, 1.5);  
    transform: scale(1.5, 1.5);
     opacity: 1;
    }
     

    <nav>
    	     <div id="menuToggle">
    		    <input type="checkbox">
    			<span></span>
    			<span></span>
    			<span></span>
    			<ul id="menu">
    				<li> <a href="#"> Home </a> </li>
    				<li> <a href="#"> Breeders </a> </li>
    				<li> <a href="#"> Contact </a> </li>
    			</ul>	
    		</div>	
    	</nav>