CSS3透视不渲染结果

我正在做一个简单的例子来演示CSS3的透视属性添加3D侧翻转效果。然而，下面的简单例子，无法完成！CSS3透视不渲染结果

<html> 
 
<head> 
 
<style> 
 
    .div1{height:300px;width:300px;position:relative;transform:perspective(100px);border:1px solid black;margin:20px;padding:10px;} 
 
    .div2{position:absolute;background:yellow;transform:rotateY(45deg);} 
 
</style> 
 
</head> 
 
<body> 
 
    <div class="div1"> 
 
     <div class="div2"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui. 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

参考：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_perspective1

来源

2017-04-06 Deadpool

变化transform: perspective(100px)为perspective: 100px

<html> 
 
<head> 
 
<style> 
 
    .div1{height:300px;width:300px;position:relative;perspective:100px;border:1px solid black;margin:20px;padding:10px;} 
 
    .div2{position:absolute;background:yellow;transform:rotateY(45deg);} 
 
</style> 
 
</head> 
 
<body> 
 
    <div class="div1"> 
 
     <div class="div2"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui. 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-04-06 07:01:05 Arkej

你在你的风格缺少这些行：

-webkit-perspective: 150px; 
-webkit-transform: rotateX(45deg);

如前所述，这些都需要的Chrome，Safari和Opera。将这些行添加到样式将呈现所需的结果。见截图：

来源

2017-04-06 07:04:13

如下尝试，您已经定义transform:perspective，而perspective是个人css3 property。

定义元素的透视属性时，它是获取透视图的元素，而不是元素本身。

.div1{ 
 
height:300px; 
 
width:300px; 
 
position:relative; 
 
perspective:100px; 
 
border:1px solid black; 
 
margin:20px; 
 
padding:10px; 
 
overflow:hidden; 
 
} 
 
.div1 > .div2{ 
 
position:absolute; 
 
background:yellow; 
 
transform:rotateY(0deg); 
 
transition:0.6s ease; 
 
} 
 
.div1:hover > .div2{ 
 
    transform:rotateY(180deg); 
 
}

<div class="div1"> 
 
     <div class="div2"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui. 
 
     </div> 
 
    </div>

来源

2017-04-06 07:06:35 frnt

<html> 
 
<head> 
 
<style> 
 
    .div1{height:300px;width:300px;position:relative;;border:1px solid black;margin:20px;padding:10px;-moz-perspective: 300px;-webkit-perspective: 300px;perspective: 300px;transform-style: preserve-3d;} 
 
    .div2{position:absolute;background:yellow;transform:rotateX(45deg); } 
 
</style> 
 
</head> 
 
<body> 
 
    <div class="div1"> 
 
     <div class="div2"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu feugiat enim. Sed vel rutrum justo. Sed pharetra, erat sit amet dictum tristique, nisi ante rhoncus lectus, sed sodales nibh odio sed sem. Donec in ligula vitae lacus volutpat lobortis. Nam justo libero, consectetur a pharetra ut, pharetra non dui. 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-04-06 07:09:38 locateganesh

CSS3透视不渲染结果

回答

相关问题