                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

有人能給我一段3d效果的代碼嗎？

我想模仿學(xué)習(xí)

慕的地0431604

2017-05-10

源自：CSS3 3D 特效 1-1

關(guān)注問題我要回答

1438

操作

收起

1 回答

西蘭花偉大炮回答被采納 +3 積分
2017-05-10

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>css3六方塊繞Y軸旋轉(zhuǎn)</title>
????<style>
????????html,body{
????????????perspective:?1000px;
????????}
????????.container{
????????????width:?500px;
????????????height:?500px;
????????????transform-style:?preserve-3d;
????????????margin:100px?auto;
????????????position:?relative;
????????????animation:?move?10s?linear?infinite;
????????}
????????@keyframes?move?{
????????????from{?transform:?rotateY(0deg)?}
????????????to{transform:?rotateY(360deg)}
????????}
????????.container:hover{
????????????animation-play-state:?paused;
????????}
????????.square{
????????????position:?absolute;
????????????width:?200px;
????????????height:?200px;
????????????left:?150px;
????????????top:150px;
????????????background-color:?#f05e6f;
????????????opacity:?0.3;
????????????font-size:?40px;
????????????color:?#FFFFFF;
????????????font-family:?"微軟雅黑",?Arial,?Helvetica,?sans-serif;
????????????line-height:?200px;
????????????text-align:?center;
????????}
????????#squ-1{??transform:?rotateY(0deg)?translateZ(250px);??}
????????#squ-2{??transform:?rotateY(60deg)?translateZ(250px);??}
????????#squ-3{??transform:?rotateY(120deg)?translateZ(250px);??}
????????#squ-4{??transform:?rotateY(180deg)?translateZ(250px);??}
????????#squ-5{??transform:?rotateY(240deg)?translateZ(250px);??}
????????#squ-6{??transform:?rotateY(300deg)?translateZ(250px);??}
????</style>
</head>
<body>
<div>
????<div?id="squ-1">one</div>
????<div?id="squ-2">two</div>
????<div?id="squ-3">three</div>
????<div?id="squ-4">four</div>
????<div?id="squ-5">five</div>
????<div?id="squ-6">six</div>
</div>
</body>
</html>

歡迎采納