html5——3D案例(立方体)
2024-09-08 11:52:36
立方体:父盒子规定了3d呈现属性,立方体做旋转运动
移动顺序:1、每个盒子都先移动100px,然后再做相应的旋转 2、只有这样立方体的几何中心点与父盒子的几何中心点是一样的
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.square {
width: 200px;
height: 200px;
margin: 150px auto;
border: 1px solid #000;
border-radius: 50%;
position: relative;
transform-style: preserve-3d;
text-align: center;
font: 500 40px/200px "Microsoft YaHei UI";
/*transform: rotateX(-16deg) rotateY(17deg);*/
animation: gun 3s infinite linear;
} .square > div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
/*border: 1px solid #fff;*/
} .front {
background-color: orange;
transform: translateZ(100px);
} .back {
background-color: green;
transform: translateZ(-100px) rotateY(180deg);
} .left {
background-color: blue;
transform: translateX(-100px) rotateY(-90deg);
} .right {
background-color: silver;
transform: translateX(100px) rotateY(90deg);
} .top {
background-color: yellow;
transform: translateY(-100px) rotateX(90deg);
} .bottom {
background-color: yellow;
transform: translateY(100px) rotateX(-90deg);
} @keyframes gun {
0% {
transform: rotateX(0deg) rotateY(0deg); }
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<!--正方形-->
<div class="square">
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
<div class="front">前</div>
<div class="back">后</div>
</div>
</body>
</html>
最新文章
- [转]Java线程安全总结
- Linux最常用命令的小总结
- WebView 一直展示加载中。。。
- SaltStack之无Master和多Master(九)
- mysql replace into用法与坑
- 百度APIStore
- Bootstrap基础学习-1
- liunx下tomcat启动报错
- ActiveMQ(5.10.0) - JNDI Support
- C#中Hashtable、Dictionary详解以及写入和读取对比
- Android自定义shape的使用
- diskpart修改盘符
- Containerd 简介
- 《前端之路》之 JavaScript 高级技巧、高阶函数(一)
- Python之旅Day8 socket网络编程
- php防范
- Centos下安装破解Jira7的操作记录
- [UE4]继承标准控件
- Android Studio将项目打包成apk
- timestamp 字段
热门文章
- 布局(codevs 1242)
- 用Docker创建Nexus
- pg_dump: [archiver (db)] connection to database “dbase” failed: FATAL: Peer authentication failed for user “postgres”
- 猫猫学iOS 之CoreLocation反地理编码小Demo输入经纬度得到城市
- HDU 1973
- Analyze提示:Value stored to &;quot;***&;quot;is never read
- 【UI自动化方面】
- Android 录制屏幕的实现方法
- 通过adb push 从电脑里复制文件到手机里
- 【转】Android 关闭多个视图Intent.FLAG_ACTIVITY_CLEAR_TOP用法