css3で2Dと3Dを変換する方法-CSSチュートリアル-php.cn

css3で2Dと3Dを変換する方法

清浅

リリース： 2018-11-17 09:29:34

オリジナル

2996 人が閲覧しました

この記事は 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>

ログイン後にコピー

レンダリング

Image 11.jpg

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を変換する方法