css:transform实现平移、旋转、缩放、倾斜元素

目录

文档

语法

css 复制代码
/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

示例

旋转元素 transform-rotate

html 复制代码
<style>
   .box {
     width: 200px;
     height: 200px;
     line-height: 200px;
     border: 1px solid green;

     text-align: center;
     margin: 0 auto;
   }

   .box + .box {
     margin-top: 100px;
   }

   .rotate {
     transform: rotate(45deg);
   }
 </style>

 <div class="box">正常元素</div>

 <div class="box rotate">旋转45deg</div>

实现效果

旋转过渡

css 复制代码
.rotate {
  transition: transform 0.5s ease-in-out;
}

.rotate:hover {
  transform: rotate(45deg);
}

旋转动画

css 复制代码
.rotate {
 animation: rotate-ani 2s linear infinite;
}

@keyframes rotate-ani {
 from {
   transform: rotate(0deg);
 }
 to {
   transform: rotate(360deg);
 }
}

参考文章

  1. css如何实现旋转效果(代码示例)
相关推荐
我在北京coding6 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机30 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人32 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我3 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing3 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端