Html中图形的变换

1引言

在网页的布局中，往往会涉及到一些动画效果的设置，而这些动画的效果通常会有图形的变换。

2问题

Html中图形的变换。

3方法

首先需要设计一个div，然后设置图形的基本形状以及大小。然后通过设置translate（位移）、rotate（旋转）、scale（缩放）、skew（斜切）来设置图形的一些变换。

4实验结果与讨论

代码清单

!DOCTYPEhtmlhtmlheadmetacharset="utf-8"title/titlestyletype="text/css"body{height:px;border:1pxsolidred;}div{width:px;height:px;background:red;transition:1s;}body:hoverdiv{/*transform:translateX(px);*/transform:translate(px,px)rotate(45deg)scale(0.5)skew(40deg,40deg);}/style/headbodydiv/div/body/html

5结语

针对html中图形基本变换的问题，提出通过方法，通过设置图形translate（位移）、rotate（旋转）、scale（缩放）、skew（斜切）实验，证明该方法是有效的。本文中涉及的图形变换以及位置变换相对简单，在之后的实验中可以练习一些更为复杂的变换。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）

预览时标签不可点收录于合集#个上一篇下一篇

转载请注明：http://www.aierlanlan.com/rzfs/278.html