简易3D正方形

最新推荐文章于 2021-07-28 09:02:58 发布

ITLaochou

最新推荐文章于 2021-07-28 09:02:58 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_41473874/article/details/79212385

版权

今天做了一个简易的自动改变旋转速率的3D正方形,它用到了css的3d效果和js的定时器,在上面可以换上自己喜欢的照片之类的,感觉还是可以的.
这个做起来不是很难,可以作为一个礼物送给自己女朋友哦,哈哈,附上代码.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!---------------------------老丑制作----------------------------------->
<meta name="keyword" content="">
    <title>3D正方形</title>
<!--内联样式表-->
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
/*给body设置背景图片*/
            background: url("zhengfangxing.jpg");
            background-size: cover;
        }
        ul{
            width: 200px;
            height: 200px;
            margin: 200px auto;
/*固定大小,不会因为margin而影响*/
            box-sizing: border-box;
            position: relative;
            /*3D效果*/
            transform-style: preserve-3d;
        }
        ul li{
            list-style-type: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
        }
/*形成3D正方形*/
        ul li:nth-child(1)
        {
            background: red;
/*设置转动角度和平移方向和尺寸,下面也一样*/
            transform: translateX(-100px) rotateY(90deg);
        }
        ul li:nth-child(2)
        {
            background: blue;
            transform: translateX(100px) rotateY(90deg);
        }
        ul li:nth-child(3)
        {
            background: green;
            transform: translateY(-100px) rotateX(90deg);
        }
        ul li:nth-child(4)
        {
            background: yellow;
            transform: translateY(100px) rotateX(90deg);
        }
        ul li:nth-child(5)
        {
            background: orange;
            transform: translateZ(-100px);
        }
        ul li:nth-child(6)
        {
            background: skyblue;
            transform: translateZ(100px);
        }
    </style>
<!--JS代码-->
    <script type="text/javascript">
//初始化函数,在页面加载完执行的函数
        window.οnlοad=init;
//定义一个变量改变旋转角度
        var i = 0;
//定义一个变量改变变化速率
        var n;
        function init() {
//初始化一个定时器
            window.setInterval("turn()",10)
        }
        function turn() {
//用随机数来改变旋转不同的速率
            n=Math.floor(Math.random()*2);
            i+=n;
//通过id获取对象
            var obj = document.getElementById("ul");
//改变ul的css样式,改变旋转角度
            obj.style.transform="rotateX("+i+"deg) rotateY("+i+"deg)";
        }


    </script>
</head>
<body>
<ul  id="ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<!--设置背景音乐,自己设置-->
<audio src="习谱予%20-%20等下一个他.mp3" autoplay="autoplay" loop="-1" hidden="hidden"></audio>
</body>
</html>
--------------------- 
版权声明：本文为CSDN博主「老丑」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41473874/article/details/79212385

ITLaochou

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简易3D正方形

今天做了一个简易的自动改变旋转速率的3D正方形,它用到了css的3d效果和js的定时器,在上面可以换上自己喜欢的照片之类的,感觉还是可以的.这个做起来不是很难,可以作为一个礼物送给自己女朋友哦,哈哈,附上代码.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt...
复制链接

扫一扫