为了账号安全,请及时绑定邮箱和手机立即绑定

显示不出效果...

<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>

正在回答

3 回答

太多地方错了。不列举了。给你代码 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>


0 回复 有任何疑惑可以回复我~
#1

氵令 提问者

非常感谢!
2015-12-07 回复 有任何疑惑可以回复我~
#2

木子舟义 回复 氵令 提问者

下次细心点哦
2015-12-07 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//56653551000129e006600430.jpg这是我用你的代码得到的结果

0 回复 有任何疑惑可以回复我~
#1

氵令 提问者

这就是效果没出来吧.....我不是给div2和3加了向x轴旋转90度么
2015-12-07 回复 有任何疑惑可以回复我~

代码没有问题,可以显示出来。你用的是什么浏览器是不是存在兼容问题

0 回复 有任何疑惑可以回复我~
#1

氵令 提问者

我用的goodle浏览器,也改过-moz在火狐上试过也不行
2015-12-07 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
CSS3 3D 特效
  • 参与学习       78572    人
  • 解答问题       425    个

使用CSS3当中的属性,创建真实可用的三维效果

进入课程

显示不出效果...

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信