CSS 3D动画 帮看看哪里错了
<!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>
五趾的鱼浏览 2827回答 4
4回答
-
MR帽子先生
问题很简单你script的位置错了，要么在head里面，要么在body里面你放在中间是不执行的。 -
慕田峪1377340
<!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 -
五趾的鱼
<!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帽子先生
<!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>这是我调整好的代码，你看看是不是你要的。
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5