Html中3D旋转动画

最新推荐文章于 2024-07-06 13:17:42 发布

飞雪冰淇

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量1k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/feixuebinbqi/article/details/104315142

版权

html页面用动画构建3D效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css" media="screen">
        body {
            background-color: #263238;
            color: white;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 12px;
            background-image: -webkit-gradient(radial,
                50% 500, 1
                50% 500, 400,
                from(rgba(255,255,255,0.3)),
                to(rgba(255,255,255,0))
            );
            background-repeat: no-repeat;
        }

        #container {
            width: 100%;
            height: 1000px;
            perspective: 800;
            perspective-origin: 50% 225px;
        }

        #stage {
            width: 100%;
            height: 100%;
            transition: transform 2s;
            transform-style: preserve-3d;
        }

        #sha