Css3旋转、位移、缩放、倾斜动画

rotate：旋转

skew：倾斜

sacle：缩放

translate：位移

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}section{width: 600px;height: 300px;background: pink;margin: 100px auto;}div{width: 100px;height: 30px;background: blue;/* 第一个左右，第二个上下 */transform: translate(200px,0);transition: 1s;}section:hover div{/* transform: translate(400px,200px); */transform: translateY(400px);/* transform: translateX(200px); */}</style></head><body><section><div></div></section></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}section{width: 300px;height: 300px;border: 5px solid red;margin: 100px auto;overflow: hidden;}section img{width: 100%;height: 100%;transition: 1s;}section:hover img{transform: scale(0.8);}</style></head><body><section><img src="img/2.jpg" ></section></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}section{width: 600px;height: 300px;background: pink;margin: 100px auto;}div{width: 100px;height: 30px;background: blue;transition: 1s;}section:hover div{transform: rotate(60deg);}</style></head><body><section><div></div></section></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}section{width: 600px;height: 300px;background: pink;margin: 100px auto;}div{width: 100px;height: 30px;background: blue;transition: 1s;}section:hover div{transform: skew(30deg);}</style></head><body><section><div></div></section></body>
</html>

Css3旋转、位移、缩放、倾斜动画相关推荐

CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
IOS--CALayer实现，界限、透明度、位置、旋转、缩放组合动画（转）
首先引入框架:QuartzCore.framework 在头文件声明:CALayer *logoLayer { //界限 CABasicAnimation *boundsAnimation = [CA ...
【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...
css3平移、旋转、倾斜、缩放、动画效果的实现
HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
html旋转角度计算,CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） | 0101后花园...
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...
CSS3中的变形处理--transform功能（旋转、缩放、倾斜、移动）
1.transform属性在CSS3中,可以利用transform功能实现文字或图像的旋转.缩放.倾斜.移动这4中类型的变形处理. (1)浏览器支持到目前为止:Safari3.1以上.Chrome ...

Css3旋转、位移、缩放、倾斜动画

Css3旋转、位移、缩放、倾斜动画相关推荐

最新文章

热门文章