做ppt找素材的网站,百度新站关键词排名,做网站的赢利点,网站初期内容css2d转换 1. 移动2. 旋转3. 缩放4. 组合转换5. 设置原点 1. 移动
translate() #xff1a;参照元素原位置#xff0c;在X轴和Y轴方向上移动。
htmlstyle.container1:hover {width: 200px;height: 200px;background-color: red;/* 在X轴方向移动50px */tra… css2d转换 1. 移动2. 旋转3. 缩放4. 组合转换5. 设置原点 1. 移动
translate() 参照元素原位置在X轴和Y轴方向上移动。
htmlstyle.container1:hover {width: 200px;height: 200px;background-color: red;/* 在X轴方向移动50px */transform: translateX(50px);}.container1 {width: 200px;height: 200px;background-color: red;}.container2:hover {width: 200px;height: 200px;background-color: green;/* 在Y轴方向移动50px */transform: translateY(50px);}.container2 {width: 200px;height: 200px;background-color: green;}.container3:hover {width: 200px;height: 200px;background-color: blue;/* 在Y轴方向移动50px */transform: translate(50px, 50px);}.container3 {width: 200px;height: 200px;background-color: blue;}/stylediv classcontainer1/divdiv classcontainer2/divdiv classcontainer3/div
/html在设置移动量时除了用像素外还可以使用百分比。X轴上的百分比是相对于了自身元素的宽Y轴上的百分比是相对于自身元素的高。
2. 旋转
rotateZ()根据指定角度旋转元素。2D旋转就是绕着Z轴旋转。
htmlstyle.container1:hover {width: 200px;height: 200px;background-color: red;/* 旋转20deg */transform: rotateZ(20deg)}.container1 {width: 200px;height: 200px;background-color: red;}/stylediv classcontainer1/div
/html3. 缩放
scale() 根据指定的倍数在X轴和Y轴缩放元素。
htmlstyle.container1:hover {width: 200px;height: 200px;background-color: red;/* X轴上缩小为原来的0.5倍 */transform: scaleX(0.5)}.container1 {width: 200px;height: 200px;background-color: red;}.container2:hover {width: 200px;height: 200px;background-color: green;/* Y轴上缩小为原来的0.5倍 */transform: scaleY(0.5)}.container2 {width: 200px;height: 200px;background-color: green;}.container3:hover {width: 200px;height: 200px;background-color: blue;/* 在X轴和Y轴上放大为原来的1.5倍 */transform: scale(1.5, 1.5)}.container3 {width: 200px;height: 200px;background-color: blue;}/stylediv classcontainer1/divdiv classcontainer2/divdiv classcontainer3/div
/html4. 组合转换
htmlstyle.container1:hover {width: 200px;height: 200px;background-color: red;/* 先移动再旋转*//* 注意旋转后坐标系也会旋转 */transform: translate(50px, 50px) rotateZ(30deg);}.container1 {width: 200px;height: 200px;background-color: red;}/stylediv classcontainer1/div
/html5. 设置原点
上述的变化都是基于默认的原点默认的原点是元素的中心点。 transform-origin 设置原点在X轴的位置和Y轴的位置。
htmlstyle.container1:hover {width: 200px;height: 200px;background-color: red;/* 旋转20deg */transform: rotateZ(20deg);/* 设置原点在元素的左上角元素绕着左上角旋转 */transform-origin: left top;}.container1 {width: 200px;height: 200px;background-color: red;}.container2:hover {width: 200px;height: 200px;background-color: green;/* 旋转20deg */transform: rotateZ(20deg);/* 设置原点在元素的左下角 */transform-origin: 0 200px;}.container2 {width: 200px;height: 200px;background-color: green;}.container3:hover {width: 200px;height: 200px;background-color: blue;/* 旋转20deg */transform: rotateZ(20deg);/* 设置原点在元素的中心点也是默认值 */transform-origin: 50% 50%;}.container3 {width: 200px;height: 200px;background-color: blue;}/stylediv classcontainer1/divdiv classcontainer2/divdiv classcontainer3/div
/htmlps上述所有代码执行后需要鼠标悬停在元素上查看转换的效果。
