Rumah > Artikel > hujung hadapan web > 如何制作一个CSS3非常炫酷的3D动画

如何制作一个CSS3非常炫酷的3D动画

一个新手asal: 2017-09-22 10:39:332043semak imbas

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>

Atas ialah kandungan terperinci 如何制作一个CSS3非常炫酷的3D动画 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：等高布局如何实现Artikel seterusnya：弹性盒模型 flex 方法总结

Artikel berkaitan

Lihat lagi