Heim > Artikel > Web-Frontend > So erstellen Sie eine sehr coole 3D-Animation mit CSS3

So erstellen Sie eine sehr coole 3D-Animation mit CSS3

一个新手Original: 2017-09-22 10:39:332046Durchsuche

CSS3 sehr coole 3D-Animation

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

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine sehr coole 3D-Animation mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie ein Layout mit gleicher HöheNächster Artikel：So implementieren Sie ein Layout mit gleicher Höhe

In Verbindung stehende Artikel

Mehr sehen