前端 三维空间笔记

<!DOCTYPE html>

<html>

<head>

<!-- 考点2D旋转,位移,缩放,倾斜和3D -->

<meta charset="utf-8" />

<title>三维</title>

<style type="text/css">

body{

/* 透视 */

perspective: 1000px;

perspective-origin: 50% 50%;

}

div{

width: 400px;

height: 400px;

}

.box1{

margin: 200px auto; /* 考点水平居中 */

background-color: aqua;

transform-style: preserve-3d; /* 给盒子开启3D空间效果 */

background-color:rgba(0,255,255,0.4);

}

.box2{

background-color: deeppink;

transform: rotateX(45deg);

}

</style>

</head>

<body>

<div class="box1">

<div class="box2">

</div>

</div>

</body>

</html>

相关推荐
cooldream20091 天前
深度解析中秋节HTML5动画的实现
前端·html·html5
皮蛋瘦肉粥_1212 天前
pink老师html5+css3day06
前端·css3·html5
庵中十三居士4 天前
在线音频三选一强制选择测试(3-AFC)
html5
知识分享小能手5 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
皮蛋瘦肉粥_1216 天前
pink老师html5+css3day02
前端·css3·html5
卓码软件测评7 天前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
java水泥工8 天前
基于Echarts+HTML5可视化数据大屏展示-智慧消防大屏
前端·echarts·html5
xhload3d10 天前
智慧停车场合集 | 图扑数字孪生静态交通一网统管
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·智慧停车·智慧交通·轻量化·电力能源·智慧停车场·智慧停车楼
合作小小程序员小小店10 天前
web开发,在线%车辆管理%系统,基于Idea,html,css,vue,java,springboot,mysql
java·spring boot·vscode·html5·web app