社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 前端問答 css變形有幾種屬性

css變形有幾種屬性

青灯夜游
青灯夜游
Sep 22, 2022 pm 04:45 PM
css

css變形有6種屬性:1、transform，向元素應用2D或3D轉換；2、transform-origin，允許使用者改變被轉換元素的位置；3、transform-style，規定被嵌套元素如何在3D空間中顯示；4、perspective，規定3D元素的透視效果；5、perspective-origin，規定3D元素的底部位置；6、backface-visibility。

css變形有幾種屬性

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。轉換的效果是讓某個元素改變形狀，大小和位置。

css變形（轉換）屬性

#屬性
 描述 CSS
transform 應用2D 或3D 到元素。 3
transform-origin 允許你改變被轉換元素的位置。 3
transform-style 規定被巢狀元素如何在 3D 空間中顯示。 3
perspective 規定 3D 元素的透視效果。 3
perspective-origin #規定 3D 元素的底部位置。 3
backface-visibility 定義元素在不面對螢幕時是否可見。 3

CSS3  transform屬性

作用：transform 屬性應用2D 或3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

語法：

transform: none|transform-functions;
登入後複製

使用範例

<!DOCTYPE html>
<html>
<head>
<style> 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: &#39;Open Sans&#39;, sans-serif;
  text-align: center;
}
h2, h4 {
  font-weight: 400;
  color: #4d4d4d;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 10px;
  min-width: 180px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 60px;
  height: 60px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 60px;
  height: 60px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.rotate:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.rotateX:hover .fill {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}
.rotateY:hover .fill {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
.rotateZ:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.scale:hover .fill {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}
.scaleX:hover .fill {
  -webkit-transform: scaleX(2);
  transform: scaleX(2);
}
.scaleY:hover .fill {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}
.skew:hover .fill {
  -webkit-transform: skew(45deg, 45deg);
  transform: skew(45deg, 45deg);
}
.skewX:hover .fill {
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.skewY:hover .fill {
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}
.translate:hover .fill {
  -webkit-transform: translate(45px, 1em);
  transform: translate(45px, 1em);
}
.translateX:hover .fill {
  -webkit-transform: translateX(45px);
  transform: translateX(45px);
}
.translateY:hover .fill {
  -webkit-transform: translateY(45px);
  transform: translateY(45px);
}
.matrix:hover .fill {
  -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  transform: matrix(2, 2, 0, 2, 45, 0);
}
</style>
</head>
<body>
<!-- Rotate-->
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg)  </p>
</div>
<div class="card">
  <div class="box rotateX">
    <div class="fill"></div>
  </div>
  <p>rotateX(45deg)</p>
</div>
<div class="card">
  <div class="box rotateY">
    <div class="fill"></div>
  </div>
  <p>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg)  </p>
</div>
<!-- scale-->
<div class="card">
  <div class="box scale">
    <div class="fill"></div>
  </div>
  <p>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill"></div>
  </div>
  <p>scaleX(2)    </p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill"></div>
  </div>
  <p>scaleY(2)    </p>
</div>
<!-- skew-->
<div class="card">
  <div class="box skew">
    <div class="fill"></div>
  </div>
  <p>skew(45deg, 45deg)  </p>
</div>
<div class="card">
  <div class="box skewX">
    <div class="fill"></div>
  </div>
  <p>skewX(45deg)</p>
</div>
<div class="card">
  <div class="box skewY">
    <div class="fill"></div>
  </div>
  <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
  <div class="box translate">
    <div class="fill"></div>
  </div>
  <p>translate(45px)  </p>
</div>
<div class="card">
  <div class="box translateX">
    <div class="fill"></div>
  </div>
  <p>translateX(45px)</p>
</div>
<div class="card">
  <div class="box translateY">
    <div class="fill"></div>
  </div>
  <p>translateY(45px)</p>
</div>
<div class="card">
  <div class="box matrix">
    <div class="fill"></div>
  </div>
  <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
</body>
</html>
登入後複製

效果圖：

css變形有幾種屬性

CSS3  transform-origin屬性

#作用：transform-origin 屬性可讓您改變被轉換元素的位置。 2D 轉換元素能夠改變元素 x 和 y 軸。 3D 轉換元素還能改變其 Z 軸。

語法：

transform-origin: x-axis y-axis z-axis;
登入後複製
 定義視圖被置於Y 軸的何處。可能的值：  ●  top 

注：该属性必须与 transform 属性一同使用。

使用示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
<script>
function changeRot(value)
{
document.getElementById(&#39;div2&#39;).style.transform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.msTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.webkitTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.MozTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.OTransform="rotate(" + value + "deg)";
document.getElementById(&#39;persp&#39;).innerHTML=value + "deg";
}
function changeOrg()
{
var x=document.getElementById(&#39;ox&#39;).value;
var y=document.getElementById(&#39;oy&#39;).value;
document.getElementById(&#39;div2&#39;).style.transformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.msTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.webkitTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.MozTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.OTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;origin&#39;).innerHTML=x + "% " + y + "%";            
}
</script>
</head>
<body>
<p>旋转红色的DIV元素，尝试更改其X轴和Y轴：</p>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
Rotate:
<input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" />
transform: rotateY:(<span id="persp">45deg</span>);
<br><br>
X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br>
Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" />
transform-origin: <span id="origin">20% 40%</span>;
 
</body>
</html>
登入後複製

效果图：

css變形有幾種屬性

CSS3 transform-style属性

作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法：

transform-style: flat|preserve-3d;
登入後複製

flat：子元素将不保留其 3D 位置。

preserve-3d：子元素将保留其 3D 位置。

注：该属性必须与 transform 属性一同使用。

使用示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO
  <div id="div3">YELLOW</div>
  </div>
</div>
</body>
</html>
登入後複製

效果图：

css變形有幾種屬性

CSS perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法

perspective: number|none;
登入後複製
#值
描述
x-axis

 定義視圖被置於X 軸的何處。可能的價值：

  ●  left 

  ●  center  

  ●  right 

## 

y-axis 

  ●  center 

  ●  bottom

  ●# 

z-axis

定義視圖被置於Z 軸的何處。可能的值：length

值描述
number元素距离视图的距离，以像素计。
none默认值。与 0 相同。不设置透视。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

使用示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1
{
	position: relative;
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150px;
	-webkit-perspective:150px; /* Safari and Chrome */
}

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>
登入後複製

css變形有幾種屬性

CSS3 perspective-origin属性

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective-origin: x-axis y-axis;
登入後複製
值描述
x-axis

定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

  • left
  • center
  • right
  • length
  • %
y-axis

定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

  • top
  • center
  • bottom
  • length
  • %

使用示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1
{
	position: relative;
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
	perspective-origin: 10% 10%;
	-webkit-perspective:150; /* Safari and Chrome */
	-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}

</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>
登入後複製

css變形有幾種屬性

CSS3 backface-visibility属性

作用：backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。

语法：

backface-visibility: visible|hidden;
登入後複製

visible：背面是可见的。

hidden：背面是不可见的。

注：只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性；Opera 15+、Safari 和 Chrome 支持需使用-webkit-backface-visibility 属性替代。

使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div
{
position:relative;
height:60px;
width:60px;
border:1px solid #000;
background-color:yellow;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
-moz-transform:rotateY(180deg); /* Firefox */
}
#div1
{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
}
#div2
{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
-ms-backface-visibility:visible;
}
</style>
</head>
<body>
<p>本例有两个 div 元素，均旋转 180 度，背向用户。</p>
<p>第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。</p>
<div id="div1">DIV 1</div>
<p>第二个 div 元素的 backface-visibility 属性设置为 "visible"，所以是可见的。</p>
<div id="div2">DIV 2</div>
<p><b>注释：</b>本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。</p>
</body>
</html>
登入後複製

效果图：

css變形有幾種屬性

（学习视频分享：web前端）

以上是css變形有幾種屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
4 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7849
15
Java教學
1649
14
CakePHP 教程
1403
52
Laravel 教程
1300
25
PHP教程
1241
29
顯示更多
Related knowledge
vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

See all articles