<!DOCTYPE?HTML>
<html>
<html>
<head>
<meta?charset="UTF-8">
????<title>3D</title>
</head>
<style?type="text/css">
??*{
?????margin:0px;
padding:0px;
}
.light{
????
????margin-left:200px;
????margin-top:200px;
????width:310px;
????height:100px;
????position:absolute;
perspective:500px;
}
.light?.stage{
????
????position:relative;
????width:310px;
????height:100px;
????transform-style:perserve-3d;
????-webkit-transition:?all?0.6s;
?????}
?
.light?.stage?.image1{
????width:310px;
height:100px;
background:red;
position:absolute;
-webkit-transform:translateZ(50px);
-webkit-transition:?all?0.6s;
}
.light?.stage?.image2{
????width:310px;
????height:100px;
????background:black;
????position:absolute;
-webkit-transition:?all?0.6s;
????-webkit-transform:?rotateX(-90deg)?translateZ(50px)?;
????
????}
?
.light?.stage:hover{
????-webkit-transform:?rotateX(90deg);
}
?????
?
?
</style>
<body>
<div?class="light">
????<div?class="stage">
???<div?class="image1">?1</div>?
????
???<div?class="image2">2</div>?
</div>??
?
</div>
</body>
</html>
4 回答
已采納
慕田峪1377340
TA貢獻2條經驗 獲得超0個贊
<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="UTF-8">
<title>3D</title>
<style?type="text/css">
*{
????margin:0px;
????padding:0px;
}
.light{
????margin-left:200px;
????margin-top:200px;
????width:310px;
????height:100px;
????position:absolute;
????perspective:500px;
}
.light?.stage{
????position:relative;
????width:310px;
????height:100px;
????transform-style:perserve-3d;
????-webkit-transition:?all?0.6s;
}
.light?.stage?.image1{
????width:310px;
????height:100px;
????background:red;
????position:absolute;
????-webkit-transform:translateZ(50px);
????-webkit-transition:?all?0.6s;
}
.light?.stage?.image2{
????width:310px;
????height:100px;
????background:black;
????position:absolute;
????-webkit-transition:?all?0.6s;
????-webkit-transform:?rotateX(-90deg)?translateZ(50px)?;
}
?
.light?.stage:hover{
????-webkit-transform:?rotateX(90deg);
}
</style>
</head>
<body>
<div?class="light">
????<div?class="stage">
???<div?class="image1">?1</div>?
????
???<div?class="image2">2</div>?
</div>??
</div>
</body>
</html>我已經驗證過了，就是這樣。除了style沒有寫在html中外 還多寫了個html
-
五趾的魚找到了 是定義3d的單詞寫錯了 O(∩_∩)O謝謝
五趾的魚
TA貢獻5條經驗 獲得超1個贊
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>CSS3練習案例</title>
</head>
<style?type="text/css">
????*{
????????margin:0px;
????????padding:0px;
????}
????.light{??
???/*設置舞臺元素*/
????????margin-top:200px;
????????margin-left:?200px;
????????width:310px;
????????height:100px;
????????position:absolute;
????????perspective:500px;
????}
????.light?.stage{
????/*設置容器*/
????????position:relative;
????????width:310px;
????????height:100px;
????????transform-style:preserve-3d;
????????-webkit-transition:?all?0.8s;
????}
????.light?.stage?.image1{
????????width:310px;
????????height:100px;
background:red;
????????position:absolute;
????????-webkit-transform:translateZ(50px)?;
????????-webkit-transition:?all?0.8s;
????}
????.light?.stage?.image2{
????????width:310px;
????????height:100px;
background:black;
????????position:absolute;
????????-webkit-transition:?all?0.8s;
????????-webkit-transform:?rotateX(-90deg)?translateZ(50px);
????}?
????.light?.stage:hover{
????????-webkit-transform:?rotateX(90deg);
????}
</style>
<body>
????<div>
????????<div>
????????????<img?src="images/a.png"?/>
????????????<img?src="images/b.jpeg"?/>
????????</div>
????</div>
</body>
</html>
人家效果是個立方體????我照抄的?不知道哪里錯了
MR帽子先生
TA貢獻245條經驗 獲得超106個贊
<!DOCTYPE?HTML>
<html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>3D</title>
</head>
<style?type="text/css">
????*?{
????????margin:?0px;
????????padding:?0px;
????}
????.light?{
????????margin-left:?200px;
????????margin-top:?200px;
????????width:?310px;
????????height:?100px;
????????position:?absolute;
????????perspective:?500px;
????}
????.light?.stage?{
????????position:?relative;
????????width:?310px;
????????height:?100px;
????????transform-style:?perserve-3d;
????????-webkit-transition:?all?0.6s;
????}
????.light?.stage?.image1?{
????????width:?310px;
????????height:?100px;
????????background:?red;
????????position:?absolute;
????????-webkit-transform:?translateZ(50px);
????????-webkit-transition:?all?0.6s;
????}
????.light?.stage?.image2?{
????????width:?310px;
????????height:?100px;
????????background:?black;
????????position:?absolute;
????????-webkit-transition:?all?0.6s;
????????-webkit-transform:?rotateX(-90deg)?translateZ(50px);
????}
????.light?.stage:hover?{
????????-webkit-transform:?rotateX(90deg);
????}
</style>
<body>
????<div?class="light">
????????<div?class="stage">
????????????<div?class="image1">?1</div>
????????????<div?class="image2">2</div>
????????</div>
????</div>
</body>
</html>這是我調整好的代碼，你看看是不是你要的。
- 4 回答
- 0 關注
- 2942 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消