gpt4 book ai didi

html - CSS3 Perspective 不渲染结果

转载 作者:搜寻专家 更新时间:2023-10-31 22:37:59 26 4
gpt4 key购买 nike

我正在制作一个简单的示例来演示 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

最佳答案

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>

关于html - CSS3 Perspective 不渲染结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43247860/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com