                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1450

操作

收起

3 回答

木子舟義
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>