7.31 CSS-2D效果

平移

语法:translate(X,Y),既可以为正值,也可以为负值(向下、向右为正方向)

注意:尽量不要对元素本身设置当前这个属性,否则图片会一直跳,原因:悬浮时图片的位置发生了改变

案例一:鼠标悬浮向右平移元素

HTML 复制代码
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        transform: translate(300px,0);
    }
</style>
<button>鼠标悬浮</button>
<div></div>

旋转

语法:transform:rotate(角度) 角度:单位deg 正值:顺时针旋转 负值:逆时针旋转

注意:inline行级元素是不能直接旋转的

案例一:div旋转360度

HTML 复制代码
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        /* 旋转 */
        transform: rotate(360deg)
    }
</style>
<button>鼠标悬浮</button>
<div></div>
缩放

语法:transform:scale(x,y) x:表示x轴的缩放比例 y:表示y轴的缩放比例 x,y 值分别为原有元素宽高的倍数。 1为不缩放,大于1放大,小于1缩小

当为负值时,将会沿x轴或y轴进行翻转 当括号内两个数相同时,可以只写一个值代替。 如果只想扩大x轴或者y轴,那么属性为scaleX(n)和scaleY(n) transform-origin 影响变换方向。

案例一:鼠标悬浮放大图片

HTML 复制代码
<style>
    img{
        transition: all 2s;
    }
    button:hover+img{
        /* 旋转 */
        transform: scale(0.5);
    }
</style>
<button>鼠标悬浮</button>
<img src="../images/1.jpg" alt="">

倾斜

语法:transform:skew(x-angle,y-angle)

该元素会以横向(X轴)和垂直(Y轴)为参考确定角度; 如果只想沿x轴或者y轴进行倾斜,那么属性为skewX(n)和skewY(n)

旋转中心点

任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。 在没有transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、缩放,扭曲等操作都是以元素自己中心位置进行变形。 如果实现过渡动画,则变换中心点应该在元素初始CSS

![[71f00a3a-e822-4533-b095-0cace1c627ad.png]]

例一:元素按照左上角的定点旋转

HTML 复制代码
<style>
    img{
        width: 400px;
        /* 过渡效果 
/
        transition: all 2s;
*        /*
 旋转中心点 */
        transform-origin: right bottom;
    }
    img:hover{
        transform: rotate(360deg);

    }
</style>
<img src="../images/0.jpg" alt="">
相关推荐
驭风少年君30 分钟前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说1 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友2 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行2 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安2 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-2 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada2 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚3 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
黑云压城After3 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好13 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式