Transformation 3D CSS3
Avant d'étudier cette section, jetons un coup d'œil aux axes de coordonnées 3D
Utilisez X, Y et Z pour représenter respectivement les trois dimensions de l'espace, et le trois axes sont perpendiculaires les uns aux autres.
Transformations 3D
CSS3 vous permet de formater des éléments à l'aide de transformations 3D.
Dans ce chapitre, vous apprendrez certaines de ces méthodes de conversion 3D :
rotateX()
rotateY()
Prise en charge du navigateur
méthode rotateX()
méthode rotateX(), fait pivoter un élément autour de son axe X d'un degré donné.
méthode<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#test{
height:200px;
width:200px;
position:absolute;
margin-top:100px;
margin-left:100px;
}
#test div{
height:200px;
width:200px;
background:lightblue;
-webkit-transition: all .6s;
}
#test div:hover{
-webkit-transform:rotateX(90deg);
}
</style>
<body>
<div id="test">
<div></div>
</div>
</body>
</html>rotateY()
méthode rotateY(), fait pivoter un élément autour de son axe Y à un degré donné.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#test{
width:400px;
height:400px;
position:absolute;
margin-left:100px;
margin-top: 100px;
/* 光源设置为离页面200像素的位置 */
perspective:200px;
}
#test1{
width:400px;
height:400px;
position:relative;
/* 相当于指定一个3D的空间 */
transform-style:preserve-3d;
}
#div2{
width:400px;
height:400px;
position:relative;
background:lightcoral;
/* 指定变换效果，变换时间为1S */
-webkit-transition: all 1s;
}
#test #test1:hover #div2{
/* 绕Y轴旋转180度 */
-webkit-transform: rotateY(180deg);
}
</style>
<body>
<div id="test">
<div id="test1">
<div id="div2"></div>
</div>
</div>
</body>
</html>Propriétés de transformation
Le tableau suivant répertorie toutes les propriétés de transformation :
Propriété Description CSS
transformer Applique une transformation 2D ou 3D à un élément. 3
transform-origin permet de changer la position de l'élément transformé. 3
transform-style Spécifie comment les éléments imbriqués sont affichés dans l'espace 3D. 3
perspective Spécifie l'effet de perspective des éléments 3D. 3
perspective-origin Spécifie la position inférieure de l'élément 3D. 3
backface-visibility Définit si l'élément est visible lorsqu'il n'est pas face à l'écran. 3
Méthode de conversion 3D
Fonction Description
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) définit une transformation 3D, en utilisant une matrice 4x4 de 16 valeurs .
translate3d(x,y,z) définit la transformation 3D.
translateX(x) Définit une translation 3D, en utilisant uniquement les valeurs utilisées pour l'axe X.
translateY(y) Définit une translation 3D, en utilisant uniquement les valeurs utilisées pour l'axe Y.
translateZ(z) Définit une translation 3D, en utilisant uniquement la valeur utilisée pour l'axe Z.
scale3d(x,y,z) définit la transformation de mise à l'échelle 3D.
scaleX(x) Définit une transformation de mise à l'échelle 3D en donnant une valeur sur l'axe X.
scaleY(y) Définit une transformation de mise à l'échelle 3D en donnant une valeur sur l'axe Y.
scaleZ(z) Définit une transformation de mise à l'échelle 3D en donnant une valeur sur l'axe Z.
rotate3d(x,y,z,angle) définit la rotation 3D.
rotateX(angle) Définit une rotation 3D le long de l'axe X.
rotateY(angle) Définit la rotation 3D le long de l'axe Y.
rotateZ(angle) Définit la rotation 3D le long de l'axe Z.
perspective(n) Définit la vue en perspective de l'élément transformé en 3D.
