logo标签列表

CSS3透视不渲染结果

htmlcss
3

我正在制作一个简单的示例，以演示CSS3透视属性如何添加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

这个链接是关于CSS 3D视角的示例。在网页设计中使用3D效果可以增强用户体验和页面交互性，实现更加生动的效果。

4个回答
3

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

2
尝试以下操作，您已定义了transform:perspective，其中perspective是一个独立的css3属性。

当为元素定义透视属性时，子元素获得透视视图，而不是元素本身。

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

1
您缺少这些样式代码：

在您的样式表中：

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

正如提到的那样，这些对于Chrome、Safari和Opera是必需的。将这些行添加到样式中将呈现所需的结果。请参见截图：

enter image description here

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接