有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写。下面看一下我写的。

这一段是样式表:

  <style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul{
position: relative;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: all 5s;
       transform:rotateX(-45deg) rotateY(-45deg);
}
ul:hover{
transform: rotateX(360deg) rotateY(360deg);
}
li{
position: absolute;
width: 200px;
height: 200px;
border-radius: 20px;
background-color: #222;
}
li:nth-child(1){
transform: translateZ(100px);
background-color: red;
}
li:nth-child(2){
background-color: green;
transform: translateZ(-100px);
}
li:nth-child(3){
background-color: silver;
transform: rotateY(90deg) translateZ(-100px);
}
li:nth-child(4){
background-color: pink;
transform: rotateY(90deg) translateZ(100px);
}
li:nth-child(5){
background-color: brown;
transform: rotateX(90deg) translateZ(-100px);
}
li:nth-child(6){
background-color: yellow;
transform: rotateX(90deg) translateZ(100px);
}
</style>

这一段是HTML:

  <ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

对于这种毫无技术含量的,实在没脸。看一下效果:

鼠标放在上面就会旋转,感兴趣的可以试一下,觉得low的多提意见,脸皮厚。

用html标签+css写出旋转的正方体的更多相关文章

  1. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  2. css写出三角形(兼容IE)

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  3. 纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?

    前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的:HTML5要搭配JS,要不然一文不值. JS固然强大,但CSS也并非一文不值, ...

  4. html+css写出类似word目录样式的内容

    word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...

  5. 不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...

  6. 用纯css写出三角形

    1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...

  7. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  8. 用css写出下拉框(代码转自wq群)

    做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...

  9. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

随机推荐

  1. React(3) --react绑定属性

    react绑定属性 /* react绑定属性注意: class要换成className for要换成 htmlFor style: <div style={{"color": ...

  2. 不小心执行 rm -f,该如何恢复?

    每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有 bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库.日志 ...

  3. Switch能否用String类型做参数?

    switch(expr): 其中,expr参数可以是一个枚举常量(由整型或字符类型实现)或一个整数表达式,其中整数表达式可以是基本类型int或其包装类Integer.由于byte.short和char ...

  4. weblogic启动脚本

    DATE=`date +%Y%m%d%H%M%S` user=`whoami` logDir=/app/logs/sguap_admin #启动日志存放路径sguap是例子系统简称# logDestd ...

  5. webRTC脱坑笔记(一)— 初识webRTC

    webRTC概述 WebRTC--- `Web browsers with Real-Time Communications (RTC)` WebRTC是一个开源项目,可以在`Web`和本机应用程序中 ...

  6. MySQL索引优化之双表示例

    select * from tableA a left join tableB b on a.f_id = b.id; 索引建tableB表上面, 因为left join 注定左表全都有,所以应该关心 ...

  7. 基于oracle 的PL/SQL编程 - 存储过程

    接上篇,游标使用的语句,相当于一段匿名的函数,窗口关闭了就不存在了.如果想要窗口关闭了,还能继续执行那段代码,就需要存储过程了: PLSQL是指一个个PLSQL的业务处理过程存储起来进行复用,这些被存 ...

  8. UVA 12012 Detection of Extraterrestrial(KMP求循环节)

    题目描述 E.T. Inc. employs Maryanna as alien signal researcher. To identify possible alien signals and b ...

  9. centos6.8下安装nginx

    我用的阿里云上的镜像,make的时候总是出错,后来说是gcc安装不完整,要重新用下面命令安装 下: yum install gcc gcc-c++ gcc-g77 接下来下载nginx用到的一些库 w ...

  10. basic play

    [root@wen ~]# w 19:01:27 up 1 day, 7:06, 3 users, load average: 0.00, 0.00, 0.00 USER TTY FROM LOGIN ...