<!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
今日推荐
周排行