CSS3景深-perspective
2024-08-28 04:57:00
3D视图正方体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3景深-perspective</title>
</head>
<style>
#div1{
position: relative;
width: 500px;
height: 500px;
perspective: 1000px; /* 景深 面的 (宽+高)*2 */
background-color: #123456;
}
#div1 ul{
transform-origin: 50% 50%; /* 旋转中心 */
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 250px;
transform-style: preserve-3d; /* 设置3D属性让子元素三维空间呈现 */
list-style: none;
margin: -125px 0 0 -125px;
padding: 0;
font-size: 120px;
animation: move 6s linear infinite; /* 动画效果 */
/*border: 10px solid #000;*/
/*box-sizing: border-box;*/
}
#div1 ul li{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.8;
box-sizing: border-box;
border: 10px solid orange;
}
#div1 ul li i{
position: absolute;
font-style: normal;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
background-color: #fff;
}
#div1 ul li:nth-child(1){
background-color: red;
transform: translateX(-125px) rotateY(90deg);
}
#div1 ul li:nth-child(2){
background-color: green;
transform: translateX(125px) rotateY(-90deg);
}
#div1 ul li:nth-child(3){
background-color: yellow;
transform: translateY(-125px) rotateX(90deg);
}
#div1 ul li:nth-child(4){
background-color: black;
transform: translateY(125px) rotateX(-90deg);
}
#div1 ul li:nth-child(5){
background-color: pink;
transform: translateZ(-125px);
}
#div1 ul li:nth-child(6){
background-color: blue;
transform: translateZ(125px);
}
@keyframes move{
0% {
transform: rotateX(0deg);
}
25% {
transform: rotateX(180deg);
}
50% {
transform: rotateX(360deg) rotateY(0deg);
}
75% {
transform: rotateX(360deg) rotateY(180deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/*==================================================================*/
</style>
<body>
<div id="div1">
<ul>
<li> <i>最新文章
- Centos YUM 升级PHP
- [2]项目创建-使用C#.NET开发基于本地数据缓存的PC客户端
- DB2LOOK命令提取数据库对象信息
- zoj2770 差分约束系统
- 手动安装python后，交互模式下退格键乱码
- IOS网络请求原理
- [整理]C#反射(Reflection)详解
- rsync+inotify实时同步环境部署记录
- EditPlus保存文件时不生成其备份文件的方法
- 十月例题F题 - City Game
- 剑指offer-面试题12.打印1到最大的n位数
- 查看文章strncpy()功能更好的文章
- apt-get 总结2
- halcon 模板匹配(最简单)
- ORACLE分页SQL语句（转载）
- Nginx 集群 反向代理多个服务器
- C++中extern “C”含义及extern、static关键字浅析
- Git使用基础篇
- 【LeetCode】166. Fraction to Recurring Decimal
- 解决同一程序在并行同时调用时，出现资源等待错误-使用DBMS_LOCK.sleep
热门文章