前端 三维空间笔记

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

相关推荐
paid槮11 小时前
HTML5如何创建容器
前端·html·html5
小胖同学~15 小时前
H5新增属性
html5
qq_582943452 天前
html5侧边提示框
前端·javascript·html5
暖木生晖2 天前
动画序列——实现一个div转一圈的效果
前端·css·html·css3·html5
a别念m4 天前
HTML5 离线存储
前端·html·html5
菜包eo5 天前
教育行业可以采用Html5全链路对视频进行加密?有什么优势?
前端·音视频·html5
gyeolhada5 天前
Web: 基础知识、HTML、CSS、JavaScript(英文版--知识点学习/复习)
前端·javascript·css3·html5·web
彤银浦6 天前
Web学习笔记3
前端·笔记·学习·html5
爱电摇的小码农7 天前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
灵犀学长7 天前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5