Html中图形的变换
1 引言
在网页的布局中，往往会涉及到一些动画效 果的设置，而这些动画的效果通常会有图形的变换。
2 问题
Html中图形的变换。
3 方法
首先需要设计一个div，然后设置图形的基本形状以及大小。然后通过设置translate（位移）、rotate（旋转）、scale（缩放）、skew（斜切）来设置图形的一些变换。
4 实验结果与讨论
代码清单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ height: 500px; border: 1px solid red; } div{ width: 100px; height: 100px; background: red; transition: 1s; } body:hover div{ /* transform: translateX(300px); */ transform: translate(100px,100px) rotate(45deg) scale(0.5) skew(40deg,40deg); } </style> </head> <body> <div> </div> </body> </html> |
|---|
5 结语
针对html中图形基本变换的问题，提出通过方法，通过设置图形translate（位移）、rotate（旋转）、scale（缩放）、skew（斜切）实验，证明该方法是有效的。本文中涉及的图形变换以及位置变换相对简单，在之后的实验中可以练习一些更为复杂的变换。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-01-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读