                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

显示不出效果...

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#3d{
  -webkit-perspective:800;
  -webkit-perspective-origin:50% 50%;

  everflow:hiddon;
  //绝对定位：相对定位

}
#pagegroup{
  width:400px;
  height:400px;
  margin:0 auto;
  -webkit-transform-style:preserve-3d;

}
.page{
  width:300px;
  height:300px;
  padding:20px;
  background-color:black;

  color:white;

  font-weight:bold;
  font-size:300px;
  line-height:300px;
  text-align:center;

  position:absolute;
}

#d1{

  -webkit-transform-origin:bottom;
  -webkit-transition：-webkit-transform 1s linear;

}
.dn{
  -webkit-transform-origin:bottom;
  -webkit-transition：-webkit-transform 1s linear;
  -webkit-transform:retateX(90deg);

}
</style>
</head>
<body>
<div id="3d">
  <div id="pagegroup">
   <div class="page" id="d1">1</div>
   <div class="page" id="dn">2</div>
   <div class="page" id="dn">3</div>
  </div>
</div>
</body>
</html>

氵令

2015-12-07

源自：CSS3 3D 特效 3-1

关注问题我要回答

1322

操作

收起

4 回答

木子舟义
2015-12-07

太多地方错了。不列举了。给你代码 Hover效果的

<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    #pagegroup {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        -webkit-perspective: 800;
        -webkit-perspective-origin: 50% 50%;
        -webkit-transform-style: -webkit-preserve-3d;
        overflow: hidden;
    }
    
    .page {
        width: 300px;
        height: 300px;
        padding: 20px;
        background-color: black;
        color: white;
        font-weight: bold;
        font-size: 300px;
        line-height: 300px;
        text-align: center;
        position: absolute;
    }
    
    #pagegroup {
        -webkit-transform-origin: bottom;
    }
    
    #dn {
        -webkit-transform-origin: bottom;
        -webkit-transition：-webkit-transform 1s linear;
    }
    
    #dn:hover {
        -webkit-transform: rotateX(45deg);
    }
    </style>
</head>

<body>
    <div id="d3">
        <div id="pagegroup">
            <div class="page" id="dn">3</div>
        </div>
    </div>
</body>

</html>