gpt4 book ai didi

html - 关闭 CSS 3d 透视图

转载 作者:太空宇宙 更新时间:2023-11-04 15:46:32 25 4
gpt4 key购买 nike

我正在尝试摆脱 css 中的 3d 转换功能。我此时的代码几乎是直接从教程中复制的,因为无论我多么努力,我似乎​​都无法让它正常工作。它应该看起来如何的链接是:http://desandro.github.com/3dtransforms/examples/card-01.html

我的代码是:

<html>
<head>
<style media="screen">
.container {
width: 200px;
height: 260px;
position: relative;
-webkit-perspective: 800;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3D;
-webkit-transition: -webkit-transform 2s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
#card .face1 {
background: red;
}
#card .face2 {
background: blue;
-webkit-transform: rotateY(180deg);
}
#card:hover {
-webkit-transform: rotateY(180deg);
}
</style>
</head>

<body>
<section class="container">
<div id="card">
<figure class="face1">1</figure>
<figure class="face2">2</figure>
</div>
</section>
</body>
</html>

就像我在教程中所说的那样,我唯一改变的是使用悬停而不是按钮。感谢您的帮助。

最佳答案

margin: 0 添加到 figure 中。该示例有一个应用它的外部样式表,因此它的必要性并不是很明显。

关于html - 关闭 CSS 3d 透视图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11696181/

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