Question

我正在制作一个简单的例子来演示CSS3 Perspective属性以添加3D侧翻效果。但是按照简单的例子，无法完成它！

<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

Answer 1

将transform: perspective(100px)更改为perspective: 100px

＆＃13;

<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>

＆＃13;

Answer 2

请尝试以下操作，您已定义transform:perspective，而perspective是个人css3 property。

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

 .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>

Answer 3

您在样式中缺少这些行：

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

如上所述，这些是 Chrome，Safari和Opera 所必需的。将这些行添加到样式将呈现所需的结果。请参见屏幕截图：

Answer 4

<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>

CSS3 Perspective不渲染结果

4 个答案: