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

首页课程实战体系课手记专栏慕课教程

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

来源：1-1 CSS3中transition

慕的地0431604

2017-05-10 23:01

我想模仿学习

写回答关注

1回答

西兰花伟大炮: 2017-05-10 23:03:48

已采纳

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

欢迎采纳

0 0

CSS3 3D 特效

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

78572 学习 · 425 问题

查看课程

相似问题

为什么我的代码没任何效果，能翻页但没有3D效果

回答 2

没有3D效果！

回答 1

css 3d效果ie也能实现吗

回答 2

3d翻页效果js代码相关问题

回答 2

CSS3 3D效果

回答 1

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