前端 三维空间笔记

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

相关推荐
java水泥工1 天前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
2501_918126912 天前
用html5写一个flappybird游戏
css·游戏·html5
DevilSeagull4 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
全栈技术负责人6 天前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
Pu_Nine_96 天前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
空山新雨(大队长)7 天前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
索迪迈科技7 天前
Flex布局——详解
前端·html·css3·html5
十碗饭吃不饱7 天前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
心一信息8 天前
ThreeJS骨骼示例
css·css3·html5
笑鸿的学习笔记9 天前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5