ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 Metamorphosis_html/css_WEB-ITnose
CSS3 Metamorphosis_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:561048ブラウズ
CSS3 Transformation
CSS3 変換は、移動、回転、拡大縮小、傾きなどの効果の集合であり、それぞれの効果は変換関数と呼ばれます。
transform
transform 属性は、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
transform:none | <transform-function> [<transform-function>] *
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; margin:40px; position:absolute; opacity:1; background:rgb(0, 148, 255); } .box2{ background:rgb(0, 148, 255); opacity:.5; /*旋转45度*/ transform:rotate(45deg); }</style></head><body><div class="box1"></div> <div class="box2"></div> </body></html> 回転
スケール
.box2{ ... /*放大了1.5倍*/ transform:scale(1.5);} 変位
.box2{ ... /*X轴与Y轴都移动150px*/ transform:translate(150px,150px);} 傾き
.box2{ ... /*X轴倾斜30度*/ transform:skew(30deg);} transform-origin
要素の中心点の位置を指定するために使用します。
transform-origin:x-axis y-axis z-axis
transform で変形するとき、デフォルトでは要素の中心点が原点として使用されます。要素の中心点は、transform-origin 属性を使用して変更できるため、指定した点が変換の中心点として使用されます。
.box2{ ... transform-origin:left top;} 上記の例では、要素の中心点がデフォルトの中点centerから左上隅点左上に変更されています。つまり、左上隅の点が変形の基点として使用されます。非常に簡単ですので、他の位置の点を一つずつ説明することはしません。また、transform-origin は、translate の中点を変更することはできません。
transform-style
transform-style 属性は、ネストされた要素が 3D 空間でどのようにレンダリングされるかを指定します。
transform-style:flat | preserver-3d
簡単に言えば、3D空間を作り出す能力です。子要素を 3D 空間で変形させます。
perspective
perspective 属性は、ユーザーと要素の 3D 空間の Z 平面との間の距離を設定するために使用されます。値が小さいほど、3D 効果がより顕著になります。
perspective:none | number
要素が遠近属性を定義すると、要素自体ではなく、その子要素が遠近効果を取得します。パースペクティブを指定しない場合、Z 空間内のすべての点が同じ 2D 平面にタイル表示されます。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*没有添加perspective时效果*/ #box1 div{ position:absolute; } #box1 div img{ transform-origin:bottom; } #box1 .box1-1 img{ opacity:.5; } #box1 .box1-2 img{ transform:rotateX(45deg); } /*添加perspective时效果*/ #box2 div{ position:absolute; left:400px; perspective:500px; } #box2 div img{ transform-origin:bottom; } #box2 .box2-1 img{ opacity:.5; } #box2 .box2-2 img{ transform:rotateX(45deg); }</style></head><body><div id="box1"> <div class="box1-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div> <div class="box1-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div></div><div id="box2"> <div class="box2-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div> <div class="box2-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div></div></body></html> 遠近要素を設定すると3D効果がより顕著になることがわかります。
また、3D変形では、3D空間を活性化できるパースペクティブ属性に加え、3D変形関数内のperspective()でも3D空間を活性化できます。違いは、perspective 属性が親要素で使用され、perspective() 関数が現在の子要素で使用され、transform で他の関数と一緒に使用されることです。例:
rreee効果は同じです。
perspective-origin
パースペクティブ属性の開始点を決定するために使用されます。簡単に言えば、視野角です。
transform:rotate(45deg) perspective(500px);
Perspective-origin は、perspective 属性と同様に、親要素の要素に定義する必要があります。つまり、perspective-origin は、perspective と組み合わせて使用されます。
perspective-origin: x-axis y-axis;
右下隅のエフェクト
左下隅のエフェクト
左上隅のエフェクト
右上隅のエフェクト
エフェクト
右コーナーエフェクト
下コーナー効果
左コーナー効果
デフォルト値、中央のコーナー。
backface-visibility
backface-visibility 属性は、要素が画面に面していないときに要素が表示されるかどうかを定義します。このプロパティは、要素を回転し、裏側を見たくない場合に便利です。
#box2 div{ ... perspective-origin:bottom right;} backface-visibility:visible | hidden;
2枚の写真が表面にあるときは表示されて変化なし
2枚の写真が裏面にあるとき、非表示の写真を裏面に設定すると表面が非表示になります。
コードをコピーしてブラウザで表示すると、よりよく理解できます。
CSS3 2D変形
2Dディスプレイスメント
translate()関数は要素を元の位置から移動させることができます。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @keyframes rotate{ 0%{ transform:rotateY(0deg); } 100%{ transform:rotateY(360deg); } } #box1,#box2{ width:300px; height:400px; float:left; margin:0 20px; transform-style: preserve-3d; animation:rotate 3s ease-in-out infinite alternate; } div div { perspective: 1000px; position:absolute; top:0; right:0; bottom:0; left:0; } #box1 div{ /*第一个图片背面不可见*/ backface-visibility: hidden; } #box1 .box1-1,#box2 .box2-1{ background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%; z-index:2; } #box1 .box1-2,#box2 .box2-2{ background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB2cgJ7dVXXXXb3XXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%; transform:rotateY(180deg); }</style></head><body><div id="box1"> <div class="box1-1"></div> <div class="box1-2"></div></div><div id="box2"> <div class="box2-1"></div> <div class="box2-2"></div></div></body></html> translate() 関数は、x 軸の 1 つの値、または x 軸、y 軸の 2 つの値を取ることができます。
値を取る場合、x軸は値が正の場合は要素が右に移動し、値が負の場合は要素が左に移動します。
2つの値を取る場合、x軸は同じで、値が正の場合は要素が下に移動し、値が負の場合は要素が上に移動します。
translate(x-axis,y-axis);
以下は 2 つの画像のディスプレイスメント効果です。コードをコピーしてブラウザで表示することをお勧めします。
X軸またはY軸に沿ってオブジェクトを移動したい場合は、translate(x-axis,0)とtranslate(0,y-axis)を使用してそれを実現できます。また、translateX() 関数とtranslateY() 関数を使用することもできます。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @-webkit-keyframes translate{ from{ transform:translate(0); } 20%{ transform:translate(100px); } 40%{ transform:translate(100px,100px); } 60%{ transform:translate(200px,100px); } 80%{ transform:translate(200px,200px); } 100%{ transform:translate(300px,200px); } } @keyframes translate{ from{ transform:translate(0); } 20%{ transform:translate(100px); } 40%{ transform:translate(100px,100px); } 60%{ transform:translate(200px,100px); } 80%{ transform:translate(200px,200px); } 100%{ transform:translate(300px,200px); } } div{ width:100px; height:100px; background:hsl(102, 100%, 50%); -webkit-animation:translate 1s ease infinite alternate; animation:translate 1s ease infinite alternate; }</style></head><body> <div></div></body></html> 2D scaling
スケーリング関数scale()を使用すると、中心原点に基づいて要素をスケーリングできます。
translateX(100px)等于translate(100px,0)translateY(100px)等于translate(0,100px)
scale() 関数は、translate() 関数と似た構文を持ち、値が 1 つしかない場合、2 番目の値は最初の値と同じになります。 X 軸は最初の値と同じです。Y 軸は比例してスケールされます。デフォルト値は 1 です。値が 1 より小さい場合、要素は縮小し、値が 1 より大きい場合、要素は拡大します。
scale(x-axis,y-axis);
scale()関数は正の値を取るだけでなく、負の値を取ることもできます。負の値を指定すると、スケーリングの前に要素が反転されます。以下に、コピーしてブラウザで表示できる 2 つのアニメーション クリップを示します。
除了能通过scale()函数使元素在X轴和Y轴进行缩放之外，还可以使用scaleX()与scaleY()两个函数分别在X轴与Y轴缩放。
scaleX(2)相当于scale(2,1)scaleY(2)相当于scale(1,2)
另外，缩放函数默认是以中心点为原点进行变形，可以使用transform-origin函数，修改元素的中心点，使缩放函数的效果不同。
2D倾斜
倾斜函数skew()能够让元素倾斜显示。与rotate()函数不同，rotate()函数只能旋转，不能改变元素形状；skew()函数不能旋转，当会改变元素形状。
skew(x-axis,y-axis)
x-axis表示元素X轴倾斜的角度。
y-axis表示元素Y轴倾斜的角度。
与前几个函数一样，当只有一个值时，表示的是X轴进行倾斜；二个值时，X轴与Y轴同时倾斜。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div { width: 100px; height: 100px; background: hsl(102, 100%, 50%); transform:skew(30deg); }</style></head><body><div></div></body></html> 元素X轴倾斜效果
div { ... transform:skew(0,30deg);} 元素Y轴倾斜效果
div { ... transform:skew(30deg,30deg);} 元素X轴与Y轴同时倾斜效果
除了使用scale()函数使X轴与Y轴倾斜之外，还可以使用scaleX()与scaleY()函数让元素在X轴与Y轴倾斜。
scaleX(30deg)等于scale(30deg,0)scaleY(30deg)等于scale(0,30deg)
还可以使用transform-origin属性修改元素变形的中心点，让元素有不同的倾斜效果。
2D矩阵
俺正在学习当中。点我我也要去学。
CSS3 3D变形
3D位移
CSS3中3D位移主要包括两种函数translateZ()和translate3d()。
translateZ(z-axis);
功能是让元素在3D空间沿Z轴进行位移。负值时，元素在视觉上感觉越来越远，导致元素变小；正值时，元素在视觉上感觉越来越近，导致元素变大了。代码效果translate3d()函数中。
translate3d(x-axis,y-axis,z-axis);
translate3d()函数使一个元素在三维空间移动。是translateX(),translateY(),translateZ()三个函数的缩写，与translate()函数不同的是，translate()函数只能作用在X轴与Y轴上，也就是在二维平面上移动。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @-webkit-keyframes translate3d { 0% { transform: translate3d(-30px,-20px,-300px); } 100% { transform: translate3d(30px,20px,200px); } } @keyframes translate3d { 0% { transform: translate3d(-30px,-20px,-300px); } 100% { transform: translate3d(30px,20px,200px); } } body { transform-style: preserve-3d; perspective: 1000px; } .box1 { position:absolute; width: 70px; height: 100px; background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%; -webkit-animation: translate3d 2s ease-in-out infinite alternate; animation: translate3d 2s ease-in-out infinite alternate; position:absolute; top:30px; left:20%; } .box2{ background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%; opacity:.5; width: 70px; height: 100px; position:absolute; top:30px; left:20%; }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 下面是两张动画片段,图中可以看出Z轴的移动对视觉上的效果。
3D缩放
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数。
scaleZ(z-axis);
让元素在Z轴上按比例缩放。
scale3d(x-axis,y-axis,z-axis);
是scaleX，scaleY，scaleZ三个函数的缩写，scaleZ(2)等于scale3d(1,1,2)。与scale函数不同的是，scale()是在二维平面上进行缩放。scale3d()在三维空间上进行缩放。scale3d()与scaleZ()要与其他函数一起使用才有效果。
建议在使用transform调用函数时，scale3d()或scaleZ()要写在其他函数之前，不然也没有效果。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @keyframes scale3d{ 0%{ transform:scale3d(1,1,-10) rotateX(0); } 100%{ transform:scale3d(1,1,2) rotateX(40deg); } } html,body{ transform-style: preserve-3d; perspective: 1200px; } div{ width: 70px; height: 100px; position:absolute; } .box1{ left:40%; top:40px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; z-index:2; animation:scale3d 1s ease-in-out infinite alternate; } .box2{ left:40%; top:40px; opacity:.5; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 下面是动画片段
3D旋转
CSS3中3D旋转可以使用rotateX(),rotateY(),rotateZ()三个函数分别设置三维空间的旋转。也可以使用rotate3d()函数集中进行设置，因为效果都是一样的，俺就选rotate3d()函数来说。
rotate3d(x,y,z,deg);
x,y,z代表旋转的三个轴，取值是0或1，0时代表这个轴不旋转，1时代表这个轴旋转。deg代表旋转的角度。
rotateX(45deg)等于rotate3d(1,0,0,45deg)rotateY(45deg)等于rotate3d(0,1,0,45deg)rotateZ(45deg)等于rotate3d(0,0,1,45deg)rotateX(45deg);rotateY(45deg);等于rotate3d(1,1,0,45deg)...
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @keyframes rotate3d{ 0%{ transform:rotate3d(0,0,0,0); } 100%{ transform:rotate3d(1,1,1,45deg); } } html,body{ transform-style: preserve-3d; perspective: 1200px; } div{ width: 70px; height: 100px; position:absolute; } .box1{ left:40%; top:40px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; z-index:2; animation:rotate3d 1s ease-in-out infinite alternate; } .box2{ left:40%; top:40px; opacity:.5; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 下面是动画片段
3D矩阵
学习中...
CSS3 变形就写到此了。
总结一下最近写博客的感想。以前不写博客时，一本书几天就能看完，而且自己又光看不练，且又不爱复习，那过几天立马就忘得干净了。多次吃亏之下，决定写博客，做笔记。写博客的这几天，一个字“累”，以往看书时感觉不过尔尔，简单的很，等到自己写，就糟了，感觉左也不对，右也是错，这时才知道难啊。写出来后欢心鼓舞，好不快乐。写博客累，却是实在。子曰：学而不思则罔。唯有自己想出来，写下来，才不会迷惑。乡下人言语粗鄙，不知所云。