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

程序员文章站 2022-04-07 16:17:26

...

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动画的详细内容，更多请关注其它相关文章！

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

6种非常炫酷的CSS3按钮边框动画特效

CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

利用SVG和CSS3来实现一个炫酷的边框动画

CSS3 3D酷炫立方体变换动画的实现

如何用PS合成一个GIF动画?使用PS制作一个炫酷的GIF动画特效教程

如何拥有一个酷炫的应用程序启动画面？ DevExpresswinform.net core

如何拥有一个酷炫的应用程序启动画面？ DevExpresswinform.net core

如何用JS和CSS3制作炫酷的弹窗效果

CSS3实现一个炫酷的lowpoly动画实例

如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose