技术员前端技术分享技术分享 2019-04-07

CSS3实现移动的3D效果立方体

效果展示：

源码展示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            perspective: 600px;;
        }
        .box{
            width: 400px;
            height: 400px;
 
            margin:100px auto;
            position:relative;
 
        }
        .box:hover ul{
            transform: rotateX(360deg) rotateY(360deg);
        }
        ul{
            width: 400px;
            height: 400px;
 
            transform: rotateX(-30deg) rotateY(0deg) ;
            transform-style: preserve-3d;
            transition: all 10s linear;
        }
        li{
            list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background:rgba(255,56,49,0.5);
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom:0;
            top: 0;;
 
        }
        ul :nth-child(1){
            transform:rotateY(0deg) translateZ(100px);
        }
        ul :nth-child(2){
            transform: rotateY(-90deg) translateZ(100px);
        }
        ul :nth-child(3) {
            transform: rotateY(-180deg) translateZ(100px);
        }
        ul :nth-child(4){
            transform: rotateY(-270deg) translateZ(100px);
        }
        ul :nth-child(5){
            transform: rotatex(90deg) translateZ(100px);
        }
        ul :nth-child(6){
            transform: rotatex(90deg) translateZ(-100px);
        }
 
    </style>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

与御风痕博客园,程序员博客园地的首选!
御风痕博客园 » CSS3实现移动的3D效果立方体