H5+CSS3写的旋转立方体

3 篇文章 0 订阅
2 篇文章 0 订阅

用CSS3的动画写出来的,代码很少,技能锻炼代码能力,也能提高思维能力,有兴趣的小伙伴可以试一试哈!
在这里插入图片描述

CSS代码

<style>
                *{padding:0;margin:0;}
                ul{
                    /*background: 150px;*/
                    /*position: relative;*/
                     margin:200px auto;
                     transform-style:preserve-3d;
                           /* perspective:2000px;*/
                    transform:rotateY(10deg) rotateY(10deg);
                      animation:rotate1 linear 5s infinite;
                    transform-origin:76px 76px -76px;
                            width: 152px;
                    height: 152px;
                        }
                li{ list-style: none;
                    border:1px solid #000;
                    width: 150px;
                    height: 150px;
                    position: absolute;
                    background: rgba(252,81,81,0.8);
                    font-size: 50px;
                    text-align: center;
                    line-height: 150px;
                   /* transition:1s;*/

                }
                li:nth-child(1){
                        transform:translateZ(0px);
                }
               li:nth-child(2){
                    transform-origin:center top;
                    transform:rotateX(-90deg);

                }
                li:nth-child(3){
                    transform-origin:center bottom;
                    transform:rotateX(90deg);
                }
                li:nth-child(4){
                    transform-origin:left center;
                    transform:rotateY(90deg);
                }
                li:nth-child(5){
                     transform-origin:right center;
                    transform:rotateY(-90deg);
                }
                li:nth-child(6){
                    transform:translateZ(-150px);
                }

                @keyframes rotate1{
                    0%{
                            transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)
                    }
                    100%{
                            /* transform:rotate3d(10,10,10,360deg);*/
                            transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
                    }
                }
        </style>

HTML代码!!

<ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 对于H5+CSS3的静态项目,你可以按照以下步骤进行编: 1. 首先,确定你想要使用的样式表类型。内部样式表可以放在`<style></style>`标签中,一般放在`<head>`标签中;行内样式表可以直接在元素标签内部,使用`style="属性: 值;"`的格式;外部样式表可以单独在一个后缀为.css的文件中,然后在HTML文件中使用`<link rel="stylesheet" href="路径">`引入。 2. 根据CSS语法规范,可以使用`<link>`标签来引入外部样式表。你可以在`<link>`标签中使用`media`属性来指定样式表适用的媒体类型和媒体特性。 3. 如果你想使用Less来编CSS,你可以搜索并安装Easy Less插件。这个插件可以让你在Less文件中修改信息后,自动将Less文件编译成CSS文件,并将CSS文件引入到页面中。这样,每次保存Less文件时,CSS文件都会自动更新。 4. 在编Less文件时,你可以使用Less的嵌套功能,将相关的样式规则组织在一起,提高代码的可读性和维护性。 总结起来,你可以使用内部样式表、行内样式表或外部样式表来编H5+CSS3的静态项目。如果想使用Less来编CSS,可以安装Easy Less插件,并在Less文件中使用嵌套功能来组织样式规则。 #### 引用[.reference_title] - *1* *2* *3* [h5(html5)+css3+移动端前端](https://blog.csdn.net/weixin_58997863/article/details/125744540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值