Css3 various attributes and values of the 2D and 3D

2d css3 of
two-dimensional planar space

		css3 2d属性 
			变形属性 transform:;
			
		2d变换:
			位移		transform:translate();
			旋转		transform:rotate();
			缩放		transform:scale();
			倾斜		transform:skew();

Displacement:
Transform: Translate (horizontal displacement, vertical displacement);
Transform: Translate (horizontal displacement);

			transform:translateX(水平位移);
			transform:translateY(垂直位移);
			
			默认情况: 正值 从上往下,从左往右

Scale: transform: scale (both horizontal and vertical scaling);
Transform: Scale (horizontal scaling, vertical scaling);
Transform: scaleY (vertical discharge condensing X);
Transform: the scaleX (horizontal scaling);
ranges: narrow 0-0.9999999
1 The original size of
greater than 1 to enlarge

Rotational
transform: rotate (); a rotational degree deg
default center point the point of rotation
inclined: skew () deg
Transform: skew (horizontal inclination);
Transform: skew (horizontal, vertical);
Transform: the skewX ();
Transform: the skewY ();
selector: target {} is clicked when the pointing element, the style change

		css样式 圆角:
			border-radius:;
			元素是正方形  宽度的一半px 	50% 正圆
			元素是长方形	较小值的一半px	半圆
						50%	椭圆

css3 depth (3D space)
observed objects when near the far smaller

			给父级元素添加:
				transform-style:preserve-3d;形成3D的空间
				perspective:800px;添加景深  形成近大远小的效果 900px-1200px
			设置观察点:
				perspective-origin:;
					left right 
					top bottom
					px
					
			background:rgba(红,绿,蓝,透明度);
				a 透明度 取值范围 0-1 背景颜色透明

2d: horizontal direction (x-axis) and the vertical direction (y-axis)
3D: a plurality of z-axis
of sight perpendicular to the z-axis is your screen, near the screen is the forward direction, away from the screen wire is reversed

		3D功能函数:
			3D的位移
				translateX()
				translateY()
				translateZ()
				
			3D的旋转
				rotateX()
				rotateX()
				rotateZ()
				
			3D的缩放
				scaleX()
				scaleY()
				scaleZ()

transition :; transition needs to trigger events

Published 10 original articles · won praise 1 · views 33

Guess you like

Origin blog.csdn.net/qq_46591632/article/details/105016654
Recommended