Example of using CSS code to achieve 360-degree rotation of a cube-CSS Tutorial-php.cn

Example of using CSS code to achieve 360-degree rotation of a cube

巴扎黑

Release： 2017-05-21 10:33:11

Original

2277 people have browsed it

This article introduces you to the method of using CSS to achieve the 360-degree rotation effect of a cube through example code. The effect after implementation is very cool, and the implemented code is very simple, which is very helpful for everyone's understanding and learning. Friends who need it can come and take a look below.

The static rendering is as follows:

##Sample code:

The code is as follows:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { margin: 0; padding: 0}
        ul {list-style: none;}
        ul {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            transition: all 6s;
            /*6秒时间转变*/
            transform-style: preserve-3d;
            /*放在父盒子内*/
        }
        ul li {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: #fff;
        }
        li:nth-child(1){
            transform: rotateX(0deg) translateZ(100px);
            /*translateZ是为了让立方体出现形状*/
            background-color: rgba(255, 0, 0, 0.6);
        }
        li:nth-child(2){
            transform: rotateX(-90deg) translateZ(100px);
            background-color: rgba( 0, 255,0, 0.6);
        }
        li:nth-child(3){
            transform: rotateX(-180deg) translateZ(100px);
            background-color: rgba(0,0,255,0.5);
        }
        li:nth-child(4){
            transform: rotateX(-270deg) translateZ(100px);
            background-color: rgba(50,50,25,0.5);
        }
        li:nth-child(5){
            transform: rotateY(-90deg) translateZ(100px);
            background-color: rgba(255,0,255,0.5);
        }
        li:nth-child(6){
            transform: rotateY(90deg) translateZ(100px);
            background-color: rgba(0,255,255,0.5);
        }
        ul:hover{
            transform :rotateX(360deg) rotateY(360deg);
        }
    </style>
</head>
<body>
<ul>
    <li>第1个盒子</li>
    <li>第2个盒子</li>
    <li>第3个盒子</li>
    <li>第4个盒子</li>
    <li>第5个盒子</li>
    <li>第6个盒子</li>
</ul>
</body>
</html>

Copy after login

The above is the detailed content of Example of using CSS code to achieve 360-degree rotation of a cube. For more information, please follow other related articles on the PHP Chinese website!