3D超炫酷旋转
2024-09-07 22:00:51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/less">
*{
margin: 0;
padding: 0;
}
@w:200px;
.box{
width: @w;
height: @w;
position: relative;
margin: 200px auto 0;
perspective: 2000px;//景深
transform-style: preserve-3d;
ul{
list-style: none;
width: @w;
height: @w;
position: relative;
transform: rotateX(30deg) rotateY(45deg);
transform-style: preserve-3d;// 加到父亲盒子上边
animation: move 5s linear infinite;
transform-origin: @w / 2 @w / 2 -@w/2;
// 2s 运动时长 linear匀速运动 infinite 不限次数运动
li{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(151,255,151,0.6);
text-align: center;
line-height: @w;
font-size: 40px;
border: 1px solid #000;
box-sizing: border-box;
}
li:nth-child(1){
transform: translateY(-@w) rotateX(90deg);
transform-origin: bottom;
}
li:nth-child(2){
transform: translateY(@w) rotateX(-90deg);
transform-origin: top;
}
li:nth-child(3){
transform: translateX(-@w) rotateY(-90deg);
transform-origin: right;
}
li:nth-child(4){
transform: translateX(@w) rotateY(90deg);
transform-origin: left;
}
li:nth-child(5){
transform: translateZ(-@w) rotateX(180deg);
}
}
@keyframes move{
0%{
transform: rotateX(0) rotateY(0);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
}
</style>
<script src="js/less.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
<script>
</script>
最新文章
- Junit的使用
- 360急速浏览器BUG,POST表单提交参数丢失
- poj 1363
- Ceph monitor故障恢复探讨
- JavaScript Scoping and Hoisting
- HandlerMethodArgumentResolver数据绑定无效
- beta汇总
- c++之函数原型
- leetcode@ [84/85] Largest Rectangle in Histogram &; Maximal Rectangle
- codevs 1709 钉子和小球
- [Swust OJ 249]--凸包面积
- 【转】MATLAB图形句柄(二)
- 这篇文章主要介绍了Citrix XenServer 6.1 安装图解教程
- Javascript 高级程序设计(第3版) - 第02章
- 利用Vistual Studio自带的xsd.exe工具,根据XML自动生成XSD
- Python基础知识之疑点难点
- 学习linux-基础-操作系统结构
- Cal Cat for Mac(猫咪控日历工具)安装
- nginx mac 下启动 停止 重启,查看安装位置
- PAT 甲级 1129 Recommendation System
热门文章
- zoj 3866
- Linux 系统管理命令 - mpstat - CPU信息统计
- selenium中关于driver的小记
- Spring IOC 一——容器装配Bean的简单使用
- bzoj 2257: [Jsoi2009]瓶子和燃料【裴蜀定理+gcd】
- 在ios Xcode10下小白都能解决library not found for -libstdc++.6.0.9
- 积分图像的应用(一):局部标准差 分类: 图像处理 Matlab 2015-06-06 13:31 137人阅读 评论(0) 收藏
- robot framework 入门
- 208 Implement Trie (Prefix Tree) 字典树(前缀树)
- Android学习笔记(十) Activity的生命周期