transform

来源：互联网发布：果园拆分系统源码编辑：程序博客网时间：2024/06/07 12:13

实例1：transform：rotate（）旋转变换

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform:rotate()</title><style>body{height:400px;border:solid 1px #000;}.box{width:100px;height:100px;background:red;margin:100px auto 0;transition: 2s;}body:hover .box{-Webkit-transform:rotate(30deg);/*顺时针旋转30度*/}</style></head><body><div class="box">111</div><!-- 文字一同旋转 --></body></html>

实例2：transform：skew（）斜切变换

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform:skewX()</title><style>body{height:400px;border:solid 1px #000;}.box{width:100px;height:100px;background:red;margin:100px auto 0;transition: 2s;}body:hover .box{-Webkit-transform:skewX(15deg);/*底边水平向右移动，改变左边与Y轴夹角15deg*/}</style></head><body><div class="box">skew()</div></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform:skewY()</title><style>body{height:400px;border:solid 1px #000;}.box{width:100px;height:100px;background:red;margin:100px auto 0;transition: 2s;}body:hover .box{-Webkit-transform:skewY(15deg);/*左边水平向上移动，改变底边与X轴夹角15deg*/}</style></head><body><div class="box">skew()</div></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform:skew(X,Y)</title><style>body{height:400px;border:solid 1px #000;}.box{width:100px;height:100px;background:red;margin:100px auto 0;transition: 2s;}body:hover .box{-Webkit-transform:skew(15deg,30deg);/*左边与Y轴夹角15deg，底边与X轴夹角30deg*/}</style></head><body><div class="box">skew()</div></body></html>

实例3：transform：scale（）缩放变换

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform:scale(X,Y)</title><style>body{height:400px;border:solid 1px #000;}div[class^='box']{width:100px;height:100px;background:red;margin:100px ;transition: 2s;float: left;font:50px/100px "宋体";text-align:center;}body:hover .box1{-Webkit-transform:scale(0.5);/*小于1缩小*/}body:hover .box2{-Webkit-transform:scale(2);/*大于1放大*/}div:nth-child(even){color:rgba(255,255,255,1);}div:nth-child(odd){color:rgba(0,0,0,1);}</style></head><body><div class="box1">缩小</div><div class="box2">放大</div><div class="box1">缩小</div><div class="box2">放大</div></body></html>

实例4：transform：translate（）位移变换

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform:translate(X,Y)</title><style>body{height:400px;border:solid 1px #000;}.box{width:100px;height:100px;background:red;margin:100px auto 0;transition: 2s;font:50px/100px "宋体";color:#fff;text-align:center;}body:hover .box{-Webkit-transform:translate(100px);/*transform:translateX(正数为从左往右 负数为从右往左);transform:translateY(正数为从上往下 负数为从下往上);*/}</style></head><body><div class="box">位移</div></body></html>

实例5：transform-origin（X，Y）旋转的基点

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transform-origin:</title><style>body{height:400px;border:solid 1px #000;}.box{height:100px;width: 100px;background:red;margin:100px auto;transition:5s;-Webkit-transform-origin:right bottom;/*如果设置的两个值都是0，则围绕左上角旋转*/}body:hover .box{-Webkit-transform:rotate(360deg) scale(0);}</style></head><body><div class="box">转呀转</div></body></html>

总结：

transform：rotate（角度）顺时针单位deg

transform：skew（斜切X，斜切Y）单位deg

：skewX（斜切X）

：skewY（斜切Y）

transform：scale（缩放X，缩放Y）无单位(>1放大/<1缩小)

：scaleX（缩放X）

：scaleY（缩放Y）

transform：translate（位移X，位移Y）单位px 若只写一个值谷歌浏览器默认为水平移动，竖直方向不动

：translateX（位移X）

：translateY（位移Y）

X正值：从左至右，负值：从右至左