前言：
今天同学们对“css图片旋转90度动画”可能比较珍视，咱们都需要学习一些“css图片旋转90度动画”的相关文章。那么小编同时在网摘上网罗了一些对于“css图片旋转90度动画””的相关内容，希望各位老铁们能喜欢，朋友们快快来了解一下吧！transform变形
transform在字面上就是变形、改变之意。
CSS3的transform主要包括rotate(旋转)、skew(扭曲)、scale(缩放)和translate(移动)以及matrix(矩形变形)。
rotate使用格式:(取值范围0-360, 单位deg)
rotate(10deg)
rotate(360deg)
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg
【实例】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>图片转换演示</title><style type="text/css">img{ width:460px; height:480px; border-radius:50%; transition:1s;}/*过渡到···deg,而不是过渡···deg*/img:hover{ /*transform: rotate(45deg);*/ transform: rotateX(45deg);/*沿着x轴旋转*/ transform: rotateY(45deg);/*沿着y轴旋转*/ transform: rotateZ(45deg);/*沿着z轴旋转*/ /*正数顺时针*/ transform: rotate(45deg);/*z轴*/ /*负数逆时针*/ transform: rotate(-45deg);/*z轴*/}</style></head><body><img src=";/></body></html>transform-origin: 设置旋转元素的基点位置
实例2: 旋转基点
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{ margin: 0; padding: 0;}img{ width: 300px; height: 220px; display: block; margin: 100px auto; transition: 1s linear; /*我们的旋转基点默认是中心*/ /*规定旋转基点的 * ①方位名词left top bottom right center * ②px(注意坐标原点为左上角) * ③%(参考的是宽高)*/ transform-origin: center center; transform-origin: right top; transform-origin: -300px 110px; transform-origin: 150px 110px; transform-origin: 50% 50%; transform-origin: 100% 100%;}body:hover>img{ transform: rotateX(45deg);/*沿着x轴旋转*/ transform: rotateY(45deg);/*沿着y轴旋转*/ transform: rotateZ(45deg);/*沿着z轴旋转*/ transform: rotate(360deg);/*z轴*/}</style></head><body><img src="img/薛凯琪.jpg"/></body></html>skew使用格式:(取值范围0-180, 单位deg)
skew(10deg,10deg)
skew(180deg,180deg)
实例: 斜切
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{ margin: 0; padding: 0; list-style: none;}img{ width: 400px; height: 300px; display: block; margin: 100px auto; transition: 1s;}img:hover{ transform: skewX(45deg); transform: skewX(-45deg); transform: skewY(45deg); transform: skewY(-45deg); /*skew(x轴斜切角度,y轴斜切角度)*/ /*skew(x,y)同步动画*/ /*transform: skew(45deg,45deg);*/ /*现在x斜切基础之上再进行y斜切*/ transform: skewX(45deg) skewY(45deg); transform: skewY(45deg) skewX(45deg);}</style></head><body><img src="img/薛凯琪.jpg"/></body></html>scale使用格式：
scale(0.2)
scale(2)
scale(2,3)
scale(0.5,2)
实例: 缩放
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{ margin: 0; padding: 0; list-style: none;}img{ width: 400px; height: 300px; display: block; margin: 100px auto; transition: 1s;}img:hover{ transform: scale(1);/*本身*/ transform: scale(2);/*扩大*/ transform: scale(0.5);/*扩大*/ transform: scale(-1);/*倒立*/ transform: scale(-2);/*倒立放大2倍*/ transform: scale(-0.5);/*倒立缩小1半*/}</style></head><body><img src="img/薛凯琪.jpg"/></body></html>translate使用格式：
translate(10px)
translate(20px,20px)
translate(-25px,-25px)
实例: 平移
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">img{ width: 400px; display: block; margin: 100px auto; transition: 1s;}img:hover{ transform: translateX(100px); transform: translateX(-100px); transform: translateY(100px); transform: translateY(-100px); transform: translate(100px,100px); /*%参考的是各自的宽和高*/ transform: translateX(100%); transform: translateY(100%);}</style></head><body><img src="img/薛凯琪.jpg"/></body></html>综合使用: 旋转、斜切、缩放
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{ margin: 0; padding: 0;}div{ width: 400px; height: 300px; margin: 100px auto; background-color: orange; transition: 1s;}div:hover{ /*transform: rotate(360deg); transform: skew(45deg);*/ /*综合使用*/ transform: rotate(360deg) skew(45deg) scale(0.5);}</style></head><body><div></div></body></html>css3新增特性都不会对盒子模型产生影响, 盒子模型大概永远是由width/height+padding+border+marign组成
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{ margin: 0; padding: 0;}div{ width: 400px; height: 300px; background-color: orange; transition: 1s; box-shadow: 0 0 5px 20px red;}div:hover{ transform: scale(2); /*css3新增特性都不会对盒子模型产生影响 盒子模型大概永远是由width/height+padding+border+marign组成*/ }</style></head><body><div></div><p>我是占位符</p></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
