How to convert 2D and 3D in css3-CSS Tutorial-php.cn

How to convert 2D and 3D in css3

清浅

Release： 2018-11-17 09:29:34

Original

3016 people have browsed it

This article shares about 2D conversion and 3D conversion in css3. It has certain reference value and I hope it will be helpful to everyone.

Through conversion, we can transform elements When moving, scaling, rotating, stretching or stretching, you need to pay attention to browser compatibility issues. When writing programs, be sure to write clearly

Chrome and Safari require the prefix -webkit-, and Internet Explorer 9 requires the prefix -ms-

Internet Explorer 10 and Firefox support 3D conversion but Opera still does not support 3D conversion

Recommended courses 【css3】

2D Transformation

translate() means moving from its current position To the set value, set the left value and top value

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

Copy after login

rotate() indicates the angle set by the clockwise rotation of the element. When it is a negative value, it indicates that the element rotates counterclockwise

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

Copy after login

scale() indicates that the size of the element will increase or decrease by setting the width (X axis) and height (Y axis)

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

Copy after login

skew() indicates the angle set by the element flip, set the X axis and Y axis

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

Copy after login

matrix()

matrix() method is a general 2D method including mathematical functions, rotation, scaling, movement and tilt

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

Copy after login

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

Copy after login

Rendering

Image 11.jpg

3D conversion

rotate Y-axis rotation

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

Copy after login

translate3d(x,y,z): 3D transformation

translateX(x) is applicable to the X-axis value, translateY(y) is applicable to the Y value, translateZ( z) Applies to the value used for the Z axis

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

Copy after login

scale3d(x,y,z): 3D scaling transformation.

scaleX(x) gives an X-axis value, scaleY(y) gives a Y-axis value, scaleZ(z) gives a Z-axis value.

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

Copy after login

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

rotateX(angle) is a 3D rotation along the X axis, rotateY(angle) is a 3D rotation along the Y axis, rotateZ(angle) is a 3D rotation along the Z axis.

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

Copy after login

perspective(n) Defines the perspective view of the 3D transformed element.

But the current browser does not support this effect

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

Copy after login

Rendering

How to convert 2D and 3D in css3

##Summary: The above is the content of this article, I hope It will be helpful for everyone to learn css3.

The above is the detailed content of How to convert 2D and 3D in css3. For more information, please follow other related articles on the PHP Chinese website!