큐브의 360도 회전을 달성하기 위해 CSS 코드를 사용하는 예-CSS 튜토리얼-php.cn

큐브의 360도 회전을 달성하기 위해 CSS 코드를 사용하는 예

巴扎黑

풀어 주다： 2017-05-21 10:33:11

원래의

2263명이 탐색했습니다.

이 기사에서는 예제 코드를 통해 CSS를 사용하여 큐브의 360도 회전 효과를 구현하는 방법을 소개합니다. 구현 후의 효과는 매우 멋지고 구현된 코드는 매우 간단하여 모든 사람에게 매우 유용합니다. 이해와 배움이 필요한 친구들은 오셔서 아래를 보시면 됩니다.

정적 렌더링은 다음과 같습니다.

샘플 코드:

코드는 다음과 같습니다.

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

로그인 후 복사

위 내용은 큐브의 360도 회전을 달성하기 위해 CSS 코드를 사용하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!