显示不出效果...-慕课网

显示不出效果...

来源：3-1 创建3D动画效果结构部分

氵令

2015-12-07 15:17

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

木子舟义: 2015-12-07 15:44:48

已采纳

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

2 0

木子舟义回复氵令

下次细心点哦

2015-12-07 15:46:25

共 2 条回复 >

一毛钱

2015-12-07 15:29:36

这是我用你的代码得到的结果

1 0

氵令

这就是效果没出来吧.....我不是给div2和3加了向x轴旋转90度么

2015-12-07 15:31:54

共 1 条回复 >
一毛钱

2015-12-07 15:24:58

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

1 0

氵令

我用的goodle浏览器，也改过-moz在火狐上试过也不行

2015-12-07 15:28:14

共 1 条回复 >

CSS3 3D 特效

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

78565 学习 · 436 问题

查看课程

相似问题

显示不出过渡效果

回答 1

不显示效果

回答 1

出不来效果

回答 1

效果不出来

回答 2

用的谷歌浏览器，代码都对为什么3d效果显示不出啊

回答 2

打开慕课网App查看更多内容