<!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
五趾的鱼
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 关注
- 2826 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消