3D舞台实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--景深的作用：是一個作用于z軸的屬性1、讓3D場景有近大遠小的效果（就是肉眼距離屏幕的距離）2、是一個不可以繼承的。但他可以作用于后代元素（不是作用于本身的）原理：景深越大，滅點越遠，元素變形更小景深越小，滅點越近，元素變形更大滅點：滅點就是你看到的盡頭景深基點：視角的位置 perspective-origin 50% 50% 參照盒模型組合變換的話，放本身的話，一定要放在首位，就是組合的話就不需要在祖先元素定義了transform-style營造有層級的3d舞臺是一個不可繼承屬性，他作用于子元素景深是會疊加的，就是因為是作用于后代元素的，所以祖先元素都會產生疊加--><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 400px;height: 400px;position: absolute;top: 50%;left: 50%;margin-left: -200px;margin-top: -200px;border: 1px solid black;transform-style: preserve-3d;perspective-origin: ;}#inner{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;border: 1px solid pink;border-radius: 50%;text-align: center;line-height: 200px;font-weight: bold;transition: 2s;transform: rotateX(120deg) translateZ(100px);}</style></head><body><div id="wrap"><div id="inner">Rainbow</div></div></body>
</html>
?
轉載于:https://www.cnblogs.com/caicaihong/p/9633472.html
總結
- 上一篇： 深度学习系列（二）显卡驱动升级篇（笔记）
- 下一篇： Oracle打补丁步骤