css3 3d變換，div變得不可用

我有一個立方體，有兩面（正面，右側），當我旋轉ο-90deg時，右側變得不可用（無法選擇文本，可以't點擊按鈕），但如果我旋轉-90.1deg右側變得可用。爲什麼會發生這種情況，我該如何解決？css3 3d變換，div變得不可用

body{perspective-origin:600px;} 
 
    
 
.cube{ 
 
    transform-style:preserve-3d; 
 
    transform:rotateY(-90deg); /*not work*/ 
 
} 
 

 
.side{ 
 
    position:absolute; 
 
    border:1px solid red; 
 
    width:200px; 
 
    height:200px 
 
} 
 

 
.front-side{transform:translateZ(100px);} 
 
.right-side{transform:translateX(100px) rotateY(90deg);}

<body> 
 
    <div class="cube"> 
 
    <div class="side front-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, deleniti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nam magni earum quas consectetur, rerum in aliquam illo perferendis sapiente!</div> 
 
    <div class="side right-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore dolor eius corrupti! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias saepe, doloribus porro nam distinctio culpa accusamus delectus harum nostrum provident.</div> 
 
    </div> 
 
</body>

來源

2017-09-28 xfranklin

的cube類已經崩潰了，這就是爲什麼孩子無法訪問元素。製作具有寬度/高度尺寸和相對位置的cube內容。

請看看這段代碼。

var cube = document.querySelector('.cube'); 
 
var degree = document.getElementById('degree'); 
 
document.getElementById('rotate').addEventListener('input', function() { 
 
    cube.style.transform = 'rotateY(' + this.value + 'deg)'; 
 
    degree.innerHTML = this.value + ' deg'; 
 
});

body { 
 
    perspective-origin: 600px; 
 
} 
 

 
.cube { 
 
    transform-style: preserve-3d; 
 
    transform: rotateY(0deg); 
 
    /*not work*/ 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.side { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.front-side { 
 
    transform: translateZ(100px); 
 
} 
 

 
.right-side { 
 
    transform: translateX(100px) rotateY(90deg); 
 
}

<body> 
 
    <div class="cube"> 
 
    <div class="side front-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, deleniti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nam magni earum quas consectetur, rerum in aliquam illo perferendis sapiente!</div> 
 
    <div class="side right-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore dolor eius corrupti! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias saepe, doloribus porro nam distinctio culpa accusamus delectus harum nostrum provident.</div> 
 
    </div> 
 
    <br/> 
 
    <input type="range" value="0" min="0" max="360" step="any" id="rotate" /> <span id="degree">0 deg</span> 
 
</body>

來源

2017-09-28 11:04:47

css3 3d變換，div變得不可用

回答

相關問題