CSS3를 사용하여 매우 멋진 3D 애니메이션을 만드는 방법-CSS 튜토리얼-php.cn

CSS3를 사용하여 매우 멋진 3D 애니메이션을 만드는 방법

一个新手

풀어 주다： 2017-09-22 10:39:33

원래의

2047명이 탐색했습니다.

CSS3 매우 멋진 3D 애니메이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            width: 200px;
            height: 200px;
            position: relative;
            margin: 300px auto;
            /*转换成3D*/
            transform-style: preserve-3d;
            /*动画属性绑定向一个选择器*/
            animation: run 3s infinite linear;

        }
        li{
            list-style: none;
            width: 200px;
            height: 200px;
            /*透明度*/
            opacity: 0.5;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        li:first-child{
            background: #3be637;
            /*平移动画*/
            transform: translateZ(-100px);
        }
        li:nth-child(2){
            background: red;
            transform:translateX(-100px) rotateY(90deg);
        }
        li:nth-child(3){
            background: darkblue;
            transform:translateY(-100px) rotateX(90deg);
        }
        li:nth-child(4){
            background:#0d1426;
            /*缩放动画*/
            transform:translateX(100px) rotateY(90deg);
        }
        li:nth-child(5){
            background: pink;
            transform:translateY(100px) rotateX(90deg);
        }
        li:nth-child(6){
            background: peru;
            /*位移*/
            transform: translateZ(100px);
        }

        /*关键帧*/
        @keyframes run {
            /*旋转*/
            0%{transform: rotateX(0deg) rotateY(0deg)}
            100%{transform: rotateX(180deg) rotateY(180deg)}
        }
    </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>

로그인 후 복사

위 내용은 CSS3를 사용하여 매우 멋진 3D 애니메이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!