前端 三维空间笔记

<!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>

相关推荐
长路 ㅤ   5 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~183399481216 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d7 小时前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
涔溪3 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang3 天前
前端如何实现电子签名
前端·javascript·html5
veminhe3 天前
html怎么设置html5
html·html5
失落的多巴胺4 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
veminhe14 天前
HTML5 浏览器支持
前端·html·html5
伍哥的传说14 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
veminhe15 天前
HTML5简介
前端·html·html5