我正在尝试用
css3旋转制作一个菜单.这是一个例子.
当一个人盘旋时,正方形围绕x轴旋转90度,然后当用户点击它时,它再旋转5度到95度.在chrome中,有时在它旋转之后,我点击它,它会回到0度,就像鼠标离开项目一样,即使它没有.如果您让菜单项完成旋转然后只需单击它就会更频繁地发生.
任何意见,将不胜感激.
#menu .menuItem {
position: relative;
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, -50px);
transform: translate3d(0, 0, -50px);
-webkit-transition: .5s;
transition: .5s;
width: 120px;
height: 50px;
opacity: .6;
cursor: pointer;
}
#menu .menuItem:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
margin-top: 1px;
}
#menu .menuItem:active {
-webkit-transform: rotateX(95deg);
transform: rotateX(95deg);
margin-top: 1px;
}
#menu .menuItem div {
position: absolute;
width: 120px;
height: 50px;
border: 1px solid #f2f2f2;
background: #848488;
}
#menu .menuItem .front,
#menu .menuItem .bottom {
text-align: center;
height: 50px;
line-height: 50px;
color: #f2f2f2;
letter-spacing: 1px;
font-size: 18px;
}
#menu .menuItem .front {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
#menu .menuItem .back {
-webkit-transform: translate3d(0, 0, -25px);
transform: translate3d(0, 0, -25px);
/* box-shadow: 0px 0px 40px 7px #b9c9d0; */
}
#menu .menuItem .top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 25px);
transform: rotateX(90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .right {
-webkit-transform: rotateY(90deg) translate3d(0, 0, 50px);
transform: rotateY(90deg) translate3d(0, 0, 50px);
height: 50px;
width: 50px;
left: 25px;
}
#menu .menuItem .left {
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 50px);
transform: rotateY(-90deg) translate3d(0, 0, 50px);
height: 50px;
width: 50px;
left: 25px;
}
最佳答案 我认为这是关于在基本元素或子元素中激活悬停状态的问题.
我稍微改变了悬停和变换的工作原理,现在它工作正常(或者至少它在我的测试中工作正常)
CSS
#menu {
position: relative;
z-index: 1;
float: left;
font-family: helvetica;
}
#menu .menuItem {
position: relative;
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
transition: .5s;
width: 120px;
height: 50px;
opacity: .6;
cursor: pointer;
}
#menu .menuItem:active {
-webkit-transform: rotateX(5deg);
transform: rotateX(5deg);
margin-top: 1px;
}
#menu .menuItem div {
position: absolute;
width: 120px;
height: 50px;
border: 1px solid #f2f2f2;
background: #848488;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
font-size: 18px;
margin-top: 1px;
transition: .5s;
}
#menu .menuItem .front {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem:hover .front {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 25px);
transform: rotateX(90deg) translate3d(0, 0, 25px);
}
#menu .menuItem:hover .bottom {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
两者之间的转换
transform: rotateX(90deg) translate3d(0, 0, 25px);
和
transform: translate3d(0, 0, 25px);
不是完美的旋转,而是2个动作之间的插值.
要获得纯旋转,其他状态必须具有匹配的属性:
transform: rotateX(0deg) translate3d(0, 0, 25px);