一開始接觸 css3 時，常常會不了解每個 css 屬性的意思，就需要花些時間去查詢及嘗試，就算到了現在，對於不熟悉的語法，我還是經常回我的 blog 查詢，如先前的 動手玩 css，快速學會flex ，我就經常會回去查 flex 的使用方法 orz…，這次趁寒流來襲，不想出門的時間在家裡做簡單的 css 3d 範例。
當要做 CSS 3D 的效果時，可以先假想兩層的元素。外層是視角，是用第三人稱的方向在看著內層；內層就是物件的本身，可以有不同的 3D 屬性(旋轉、位移等等)。
HTML 結構如下：
<div class="perspective"> <!-- 外層視角 --> <div class="box"> <!-- 物件本身 --> <div></div>
在CSS 的屬性上，外層會提供 perspective 的透視屬性，這是從第三人稱看物件的距離，值可以先使用 500px ~ 1000px (不負責研究，通常這個起手式效果不太差)；在內層的屬性則必須包含 transform-style: preserve-3d ，讓物件本身已 3D 的模式呈現，並加入 transform 的變形屬性，就可以完成基本的 CSS 3D 。
CSS 結構如下：
立即学习“前端免费学习笔记（深入）”；
.perspective { perspective: 500px;}.box { transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}接下來透過動手玩的方式，調整看看外層與內層得屬性值，了解他們彼此 perspective 與 transform 之間的效果。
可以發現，如果 perspective 值如果是非常小時，內層物件就會像衝出螢幕一樣，如同我們在看物體時，通常會保持一定的距離，並非貼的很近在觀看。
到底是怎樣的溫度會不想出門呢…，在高雄很少低於 10 度，如果低於 8 度就要拿出羽絨衣，在更低一點就只想要躲在棉被裡…。
這個體感問度是…，讓我回想到馬祖的冬天。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
723
