Home >Web Front-end >CSS Tutorial >How to convert 2D and 3D in css3
How to convert 2D and 3D in css3
- 清浅Original
- 2018-11-16 17:40:433027browse
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
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
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!