<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-3D转换模块</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid #000;
margin: 100px auto;
perspective: 500px;
/*
1.什么是2D和3D
2D就是一个平面，只有宽度和高度，没有厚度
3D就是一个立体，有宽度和高度，还有厚度
默认情况下所有的元素都是呈2D展示的
2.如何让某个元素呈3D展示
和透视一样，想看到某个元素的3D效果，
只需要给他的父元素添加一个transform-style属性，
然后设置位preserve-3d即可
*/
transform-style: preserve-3d;
transform: rotateY(82deg);
}
.son{
width: 100px;
height: 100px;
background-color: #FF9900;
border: 1px solid #000;
margin: 0 auto;
margin-top: 50px;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
HTML5前端开发入门之CSS 3D转换模块
猜你喜欢
转载自blog.csdn.net/qq_41886761/article/details/86080318
今日推荐
周排行