css3動畫2D、3D轉換

時間 2019-11-21

標籤 css3 css 動畫 2d 3d 轉換欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3動畫</title>
<style type="text/css">
div{width:100px;height:100px;background: rebeccapurple;color:#fff;}
.div1{
/*translate:移動（x,y）*/
transform:translate（100px,100px）；
-webkit-transform: translate（100px,100px）；/*safari,chrome*/
-ms-transform: translate（100px,100px）；/*IE*/
-o-transform:translate（100px,100px）；/*opera*/
-moz-transform: translate（100px,100px）；/*firefox*/
}
.div2{
/*rotate:旋轉（旋轉角度edg）*/
transform:rotate（100deg）；
-webkit-transform:rotate（100deg）；/*safari,chrome*/
}
.div3{
/*scale:縮放（寬，高）*/
transform:scale（1,2）；
-webkit-transform:scale（1,2）；/*safari,chrome*/
}
.div4{
/*skew:傾斜（圍繞x軸旋轉，圍繞y軸旋轉）*/
transform:skew（20deg,20deg）；
-webkit-transform:skew（20deg,20deg）；/*safari,chrome*/
}
.div5{
/*matrix矩陣，定義 2D 轉換，使用六個值的矩陣
定義 3D 轉換，使用 16 個值的 4x4 矩陣*/
transform:matrix（0.586,0.8,-0.8,0.866,0,0）；
-webkit-transform: matrix（0.586,0.8,-0.8,0.866,0,0）；
}
/*3D轉換*/
.div6{
/*rotateX:（圍繞x軸旋轉）*/
/*rotateY:（圍繞y軸旋轉）*/
transform:rotateX（120deg）；
-webkit-transform:rotateX（120deg）；/*safari,chrome*/
}
</style>
</head>
<body>
<div>這個是測試1</div><br/>
<div class="div1">這個是測試2</div><br/>
<div class="div2">這個是測試2</div><br/>
<div class="div3">這個是測試2</div><br/>
<div class="div4">這個是測試2</div><br/>
<div class="div5">這個是測試2</div><br/>
<div class="div6">這個是測試2</div><br/>css

<a href="shijiazhuang.changtu.com/" target="_blank">石家莊汽車站時刻表</a>
</body>
</html>html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。