前端 三维空间笔记

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

相关推荐
全栈技术负责人16 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
Pu_Nine_918 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
空山新雨(大队长)2 天前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
索迪迈科技2 天前
Flex布局——详解
前端·html·css3·html5
十碗饭吃不饱2 天前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
心一信息3 天前
ThreeJS骨骼示例
css·css3·html5
笑鸿的学习笔记4 天前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
java水泥工4 天前
基于Echarts+HTML5可视化数据大屏展示-学生综合成绩评价系统大屏
spring boot·echarts·html5
Thetimezipsby4 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
java水泥工5 天前
基于Echarts+HTML5可视化数据大屏展示-茶叶种植大数据溯源平台
大数据·echarts·html5