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

有人能给我一段3d效果的代码吗？

我想模仿学习

慕的地0431604

2017-05-10

源自：CSS3 3D 特效 1-1

关注问题我要回答

1396

操作

收起

1 回答

西兰花伟大炮回答被采纳 +3 积分
2017-05-10

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3六方块绕Y轴旋转</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>

欢迎采纳