ホームページ > 記事 > ウェブフロントエンド > css3で2Dと3Dを変換する方法
css3で2Dと3Dを変換する方法
- 清浅オリジナル
- 2018-11-16 17:40:432983ブラウズ
この記事は css3 での 2D 変換と 3D 変換について共有するものであり、皆様の参考になれば幸いです。移動、拡大縮小、回転、伸縮などを行う場合は、ブラウザの互換性の問題に注意する必要があります。プログラムを作成するときは、必ず明確に記述してください。
Chrome と Safari には接頭辞 -webkit- が必要で、Internet Explorer 9 には接頭辞が必要です。プレフィックス -ms-
Internet Explorer 10 と Firefox は 3D 変換をサポートしていますが、Opera はまだ 3D 変換をサポートしていません
推奨コース 【css3】
2D 変換translate() は、からの移動を意味します。現在の位置 設定値に左の値と上の値を設定します。
translate（100px,30px）//从左侧移动100px，从上往下移30px
rotate()は要素の右回転で設定された角度を示します。 負の値の場合、要素が回転することを示します。反時計回り
rotate(30deg)//顺时针旋转30度
scale() は、幅 (X 軸) と高さ (Y 軸) を設定することによって要素のサイズが増減することを示します
scale(3,4)//把宽度扩大为原来的2倍，把高度变为原来的4倍
skew() は、設定された角度を示します要素の反転により、X 軸と Y 軸を設定します。
skew(30deg,20deg)//沿X轴把元素翻转30度，沿Y轴翻转20度
matrix()
matrix() メソッドは、数学関数、回転、スケーリング、移動、傾斜を含む一般的な 2D メソッドです
matrix(0.866,0.5,-0.5,0.866,0,0）
例：
<style>
/*在chrome浏览器下运行*/
div
{
width:200px;
height: 100px;
text-align: center;
line-height:100px;
background-color: pink;
-webkit-transform:translateX(150px);/*X轴移动150px*/
-webkit-transform:rotate(-50deg);/*按逆时针旋转50度*/
-webkit-transform:skew(20deg,20deg);/*沿X轴，Y轴旋转20度*/
}
</style>レンダリング
3D 変換
Y 軸回転
rotateX(30deg)//沿X轴旋转30度
translate3d(x,y,z): 3D 変換
translateX(x) は X 軸の値に適用され、translateY(y) は Y の値に適用されます。translateZ( z ) Z 軸に適用される値
translateX(100px)//向左移动100px
scale3d(x,y,z): 3D スケーリング変換。
scaleX(x) は X 軸の値を与え、scaleY(y) は Y 軸の値を与え、scaleZ(z) は Z 軸の値を与えます。
scaleX(1.5)//沿水平方向扩大1.5倍 scaleX(0.5)//沿水平方向缩小0.5倍
rotate3d(x,y,z,angle): 3D 回転。
rotateX(angle) X 軸に沿った 3D 回転、rotateY(angle) Y 軸に沿った 3D 回転、rotateZ(angle) Z 軸に沿った 3D 回転。
rotateX(30deg)//沿X轴旋转30度
perspective(n) 3D 変換された要素の透視図を定義します。
ただし、現在のブラウザではこの効果はサポートされていません
例
<style type="text/css">
.demo{
width: 100px;
height: 100px;
}
.box{
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 1s;
}
.box1{
position: absolute;
width:100px;
height:100px;
background-color:pink;
}
.demo:hover .box{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="demo">
<div class="box">
<div class="box1"></div>
</div>
</div>レンダリング
##概要: 上記がこの記事の内容です。 css3を学ぶのは誰にとっても役立ちます。 
以上がcss3で2Dと3Dを変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。