<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.warp{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid black;
width: 300px;
height: 300px;
perspective: 200px;
transform-style: preserve-3d;
}
.warp > .box{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform-origin: center center -50px;
transition: 3s;
}
.warp >.box > div{
position: absolute;
width: 100px;
height: 100px;
background: rgb(74, 1, 207);
font:50px/100px "微软雅黑";
text-align: center;
}
.warp>.box>div:nth-child(5){
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.warp>.box>div:nth-child(3){
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
.warp>.box>div:nth-child(4){
right: -100px;
transform-origin: left;
transform: rotateY(90deg);
}
.warp>.box>div:nth-child(6){
bottom: -100px;
transform-origin: top;
transform: rotateX(-90deg);
}
.warp>.box>div:nth-child(1){
z-index: 1;
}
.warp>.box>div:nth-child(2){
transform:translateZ(-100px) rotateX(180deg);
}
</style>
</head>
<body>
<div class="warp">
<div class="box">
<div>欢</div>
<div>迎</div>
<div>来</div>
<div>学</div>
<div class="c">习</div>
<div>啊</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var a=document.querySelector(".warp");
var b=document.querySelector(".box");
var c=document.querySelector(".c");
var flag=0;
a.onclick=function(){
if(flag==0){
b.style.transform="rotateX(270deg)";
}else if(flag==1){
b.style.transform="rotateY(-90deg)";
}else if(flag==2){
b.style.transform="rotateY(90deg)"
}
if(flag>2)flag=0;
else flag++;
console.log(flag);
}
}
</script>
</html>
用css3写一个三维的立方体动画
转载请注明出处或者链接地址：https://www.qianduange.cn//article/22967.html
相关文章
-
使用 npm 命令安装 jQuery 编程
-
若依框架做柱形图，根据用户创建时间，统计每个月的人数的柱形图，参考的是Apache ECharts
-
ECharts 最小高度设置指南
-
解决echarts柱状图鼠标指上时柱子消失或闪动
-
echarts中国地图如何标记散点图_echarts地图标记点
-
echarts无数据的展示内容，用graphic属性配置
-
Vue 3 实战教程：从基础到高级应用开发
-
VueDraggable 使用指南
-
输入搜索、分组展示选项、下拉选取，el-select 实现：即输入关键字检索，返回分组选项，选取跳转到相应内容页 —— VUE 项目-全局模糊检索
-
vue前端项目图标库推荐
发布的文章
Autoware安装教程
2025-03-09 15:03:40
【C 融会贯通】哈希表的使用
2025-03-09 15:03:39
C 批量请求接口检查微信小程序是否被封禁
2025-03-09 15:03:38
whisper.cpp语音识别windows c 搭建
2025-03-09 15:03:37
【C 】map详解
2025-03-09 15:03:37
【C 篇】深入剖析C Vector底层源码及实现机制
2025-03-09 15:03:36
欲善其事,先利其器——VSCode之代码格式化（K&R，Allman花括号换行之争，参数换行，宏定义连续对齐，C/C Extension Pack，clang-format）
2025-03-09 15:03:35
【后端】主流后端语言：JAVA、C、C 、GO、PYTHON
2025-03-09 15:03:35
【C 】——高效构建与优化二叉搜索树
2025-03-09 15:03:34
[C ][第三方库][Elasticsearch]详细讲解
2025-03-09 15:03:34
大家推荐的文章