Вращение на основе перспективы: у меня есть div, который я хочу вращать в CSS3, используя webkit. Div вращается после события usermouse down в jquery
Для этого я использую ключевые кадры
@-webkit-keyframes rotate {
enter code here
0% {
-webkit-transform: rotate(0deg);
}100% {
-webkit-transform: rotate(90deg);
}
}
@-webkit-keyframes rotate2 {
0% {
-webkit-transform: rotate(90deg);
-webkit-transform: rotateX(45deg);
}100% {
-webkit-transform: rotate(180deg);
-webkit-transform: rotateX(45deg);
}
}
@-webkit-keyframes rotate3 {
0% {
-webkit-transform: rotate(180deg);
}100% {
-webkit-transform: rotate(270deg);
}
}
@-webkit-keyframes rotate4 {
0% {
-webkit-transform: rotate(270deg);
}100% {
-webkit-transform: rotate(360deg);
}
}
Мой вопрос: я также применил перспективу webkit, чтобы дать вид в 3d, и мне нужно повернуть div, сохраняя угол перспективы X на 45 градусов ... как это возможно?
body {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 500;
-webkit-perspective-origin: 45%;
}
#mydiv {
height: 300px;
width: 100px;
border: 2px solid #D3DAED;
position:absolute;
top:29%;
left:45%;
**-webkit-transform: rotateX(45deg);**
}