CSS3 3D 特效-慕课网技术问答-课程问答

shusf 2019-10-23

transition可以实现箭头动态流动的效果吗: 箭头动态流动什么样; 1回答·2110浏览

慕尼黑5837721 2018-06-30

代码哪里有错啊，为什么3d旋转不起

修改图片中所述错误........

2回答·1372浏览

慕的地0431604 2017-05-10

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

已采纳西兰花伟大炮的回答

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

欢迎采纳

1回答·1424浏览