Home  >  Article  >  Web Front-end  >  How to convert 2D and 3D in css3

How to convert 2D and 3D in css3

清浅
清浅Original
2018-11-16 17:40:432995browse

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

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度

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倍

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

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

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

Rendering

Image 11.jpg

3D conversion

rotate Y-axis rotation

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

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

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倍

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度

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn