用html标签+css写出旋转的正方体
有一段时间没写代码了,刚写有点手生,无从下手,为了能快速进入状态,就写了这一个小东西,纯用标签和样式表写。下面看一下我写的。
这一段是样式表:
<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写出旋转的正方体的更多相关文章
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 纯HTML+CSS写出一颗会飘动的树,有没有惊艳到你呢?
前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的:HTML5要搭配JS,要不然一文不值. JS固然强大,但CSS也并非一文不值, ...
- html+css写出类似word目录样式的内容
word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...
- 不用任何图片,只用简单的css写出唯美的钟表,就问你行吗?
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- 用css写出下拉框(代码转自wq群)
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
- html+css写出响应式侧边导航栏
html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...
随机推荐
- React(3) --react绑定属性
react绑定属性 /* react绑定属性注意: class要换成className for要换成 htmlFor style: <div style={{"color": ...
- 不小心执行 rm -f,该如何恢复?
每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有 bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库.日志 ...
- Switch能否用String类型做参数?
switch(expr): 其中,expr参数可以是一个枚举常量(由整型或字符类型实现)或一个整数表达式,其中整数表达式可以是基本类型int或其包装类Integer.由于byte.short和char ...
- weblogic启动脚本
DATE=`date +%Y%m%d%H%M%S` user=`whoami` logDir=/app/logs/sguap_admin #启动日志存放路径sguap是例子系统简称# logDestd ...
- webRTC脱坑笔记(一)— 初识webRTC
webRTC概述 WebRTC--- `Web browsers with Real-Time Communications (RTC)` WebRTC是一个开源项目,可以在`Web`和本机应用程序中 ...
- MySQL索引优化之双表示例
select * from tableA a left join tableB b on a.f_id = b.id; 索引建tableB表上面, 因为left join 注定左表全都有,所以应该关心 ...
- 基于oracle 的PL/SQL编程 - 存储过程
接上篇,游标使用的语句,相当于一段匿名的函数,窗口关闭了就不存在了.如果想要窗口关闭了,还能继续执行那段代码,就需要存储过程了: PLSQL是指一个个PLSQL的业务处理过程存储起来进行复用,这些被存 ...
- UVA 12012 Detection of Extraterrestrial(KMP求循环节)
题目描述 E.T. Inc. employs Maryanna as alien signal researcher. To identify possible alien signals and b ...
- centos6.8下安装nginx
我用的阿里云上的镜像,make的时候总是出错,后来说是gcc安装不完整,要重新用下面命令安装 下: yum install gcc gcc-c++ gcc-g77 接下来下载nginx用到的一些库 w ...
- 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 ...