Comment convertir 2D et 3D en CSS3-tutoriel CSS-php.cn

Comment convertir 2D et 3D en CSS3

清浅

Libérer： 2018-11-17 09:29:34

original

2997 Les gens l'ont consulté

Cet article parle de la conversion 2D et de la conversion 3D en CSS3. Il a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde

Grâce à la conversion, nous pouvons transformer des éléments pour les déplacer. , zoomer, faire pivoter, étirer ou étirer, vous devez faire attention aux problèmes de compatibilité du navigateur Lors de l'écriture du programme, assurez-vous d'écrire clairement

Chrome et Safari nécessitent le préfixe -webkit-, et Internet Explorer 9 l'exige. le préfixe -ms-

Internet Explorer 10 et Firefox prennent en charge la conversion 3D mais Opera ne prend toujours pas en charge la conversion 3D

Cours recommandés 【css3】

Transformation 2D

translate() signifie passer de sa position actuelle À la valeur définie, définissez la valeur de gauche et la valeur supérieure

translate（100px,30px）//从左侧移动100px，从上往下移30px

Copier après la connexion

rotate() signifie que l'élément est tourné dans le sens des aiguilles d'une montre de l'angle défini. Lorsqu'il s'agit d'une valeur négative, cela signifie que l'élément est tourné dans le sens des aiguilles d'une montre. tourné dans le sens inverse des aiguilles d'une montre

rotate(30deg)//顺时针旋转30度

Copier après la connexion

scale() indique que la taille de l'élément augmentera ou diminuera en définissant la largeur (axe X) et la hauteur (axe Y)

scale(3,4)//把宽度扩大为原来的2倍，把高度变为原来的4倍

Copier après la connexion

skew( ) indique l'angle défini par le retournement de l'élément. Définir l'axe X et l'axe Y

 skew(30deg,20deg)//沿X轴把元素翻转30度，沿Y轴翻转20度

Copier après la connexion

matrix()

la méthode matrix() est une méthode 2D générale incluant les mathématiques. fonctions, rotation, mise à l'échelle, mouvement et inclinaison

matrix(0.866,0.5,-0.5,0.866,0,0）

Copier après la connexion

例：
<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>

Copier après la connexion

Rendu

Image 11.jpg

Conversion 3D

rotateX() Indique le degré de rotation le long de la valeur de l'axe, translationY(y) convient à la valeur Y, translationZ(z) convient à la valeur de l'axe Z

rotateX(30deg)//沿X轴旋转30度

Copier après la connexion

scale3d(x,y,z) : conversion de mise à l'échelle 3D.

scaleX(x) donne une valeur sur l'axe X, scaleY(y) donne une valeur sur l'axe Y, scaleZ(z) donne une valeur sur l'axe Z.

translateX(100px)//向左移动100px

Copier après la connexion

rotate3d(x,y,z,angle) : rotation 3D.

rotateX(angle) est une rotation 3D le long de l'axe X, rotateY(angle) est une rotation 3D le long de l'axe Y, rotateZ(angle) est une rotation 3D le long de l'axe Z.

scaleX(1.5)//沿水平方向扩大1.5倍
scaleX(0.5)//沿水平方向缩小0.5倍

Copier après la connexion

perspective(n) Définit la vue en perspective de l'élément transformé en 3D.

Mais le navigateur actuel ne prend pas en charge cet effet

rotateX(30deg)//沿X轴旋转30度

Copier après la connexion

Rendu

例
<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>

Copier après la connexion

Résumé : ce qui précède est le contenu de cet article , j'espère que cela sera utile à tous ceux qui apprennent le CSS3.

Comment convertir 2D et 3D en CSS3