web前端开发旋转的标签 web前端入门到实战：transform 变形

在平时的学习生活当中，对于前端开发一定都很关心，今天我爱编程网小编为大家整理了web前端开发旋转的标签 web前端入门到实战：transform 变形，希望能够帮助到大家。

web前端入门到实战：transform 变形

transform 变形

通过 CSS3 变换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。使用transform属性为元素应用变换。

1、Transform：对元素进行变形。

2、Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。

一.CSS3 2D 转换

1、2D Transform转换属性

2、Transform 方法 我爱编程网

①.移动 translate

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

translateX(x)仅水平方向移动（X轴移动）

translateY(Y)仅垂直方向移动（Y轴移动）

②.缩放 scale

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

scaleX(x)元素仅水平方向缩放（X轴缩放）

scaleY(y)元素仅垂直方向缩放（Y轴缩放）

③.旋转 rotate

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

④.倾斜 skew

skew(x,y)使元素在水平和垂直方向同时倾斜（X轴和Y轴同时按一定的角度值进行倾斜变形）

skewX(x)仅使元素在水平方向倾斜变形（X轴倾斜变形）

skewY(y)仅使元素在垂直方向倾斜变形（Y轴倾斜变形）

感谢阅读，希望本文对大家学习上有所帮助。

点击： 加入

如何使用css3制作圆形旋转动画（附完整代码）

随着css3的广泛应用，人们浏览的web网页越来越多元化，而前端开发者也越来越注重人机交互和用户体验。从一开始的文字到后来的图片，以至于现在的动画特效，人们对于网页的要求也越来越挑剔，那么今天给大家展示一下如何使用css3制作旋转动画。本文在介绍如何使用css3制作旋转动画的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。
实例如图所示
使用css3制作旋转动画的思路
首先我们需要使用div画出这8个图标，我们通过观察可以发现，8个图标可以分成4组div，并且可以将圆形等分为8份，这样可以方便我们随后的操作。我是每两个垂直对应的圆就放在同一个div中，令其旋转起来需要使用css3中的旋转属性：第一个div先保持不动，第二个div旋转45°，以此类推，下一个div都要比上一个div多旋转45°就可以实现布局。
使用css3制作旋转动画的步骤
步骤一：画出8个图标设置成4个div
<div class="out_circle">
<div class="slide"></div>
<div class="nav_circle r1">
<div class="img_top img">
<img src="images/menu.png">
<a href="#">产品中心</a>
</div>
<div class="img_bottom img" >
<img src="images/menu_01.png">
<a href="#">官方网站</a>
</div>
</div>
<div class="nav_circle r2">
<div class="img_top img">
<img src="images/menu_02.png">
<a href="#">代理查询</a>
</div>
<div class="img_bottom img" >
<img src="images/menu_03.png">
<a href="#">后台登录</a>
</div>
</div>
<div class="nav_circle r3">
<div class="img_top img">
<img src="images/menu_04.png">
<a href="#">公司资质</a>
</div>
<div class="img_bottom img" >
<img src="images/menu_05.png">
<a href="#">质检报告</a>
</div>
</div>
<div class="nav_circle r4">
<div class="img_top img">
<img src="images/menu_06.png">
<a href="#">代理登录</a>
</div>
<div class="img_bottom img" >
<img src="images/menu_07.png">
<a href="#">代理授权</a>
</div>
</div>
</div>步骤二：使用css3布局

.out_circle{
width:440px;
height:440px;
border:1px solid;
border-radius:50%;
margin:30px auto 0 auto;
position: relative;
}
.nav_circle{
width:110px;
height:440px;
float:left;
position:absolute;
top:0;
left:169px;
text-align:center;
}
.img_top{
top:-27px;
-webkit-transform: rotate(0deg);
}
.img_bottom{
top:316px;
-webkit-transform: rotate(0deg);
}
.img_top img,.img_bottom img{
width:77px;
height: 77px;
}
.img_top,.img_bottom{
position: relative;
z-index:1;
}
.nav_circle .img a{
position: absolute;
top:10px;
left:94px;
width: 52px;
}
.r1{
transform:rotate(0deg) skew(0deg) scale(1);
-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(0deg) skew(0deg) scale(1);
animation: rotate 10s linear infinite;
-webkit-animation:rotate 10s linear infinite;
-moz-animation:rotate 10s linear infinite;
-o-animation:rotate 10s linear infinite;
}
.r1 .img{
transform:rotate(0deg) skew(0deg) scale(1);
-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(0deg) skew(0deg) scale(1);
animation:rotate_c1 10s linear infinite;
-webkit-animation:rotate_c1 10s linear infinite;
}
.r2{
transform:rotate(45deg) skew(0deg) scale(1);
-ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(45deg) skew(0deg) scale(1);
animation: rotatef 10s linear infinite;
-webkit-animation:rotatef 10s linear infinite;
-moz-animation:rotatef 10s linear infinite;
-o-animation:rotatef 10s linear infinite;
}
.r2 .img {
transform:rotate(-45deg) skew(0deg) scale(1);
-ms-transform:rotate(-45deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-45deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(-45deg) skew(0deg) scale(1);
animation:rotate_c2 10s linear infinite;
-webkit-animation:rotate_c2 10s linear infinite;
}
.r3 {
transform:rotate(90deg) skew(0deg) scale(1);
-ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(90deg) skew(0deg) scale(1);
animation: rotates 10s linear infinite;
-webkit-animation:rotates 10s linear infinite;
-moz-animation:rotates 10s linear infinite;
-o-animation:rotates 10s linear infinite;
}
.r3 .img{
transform:rotate(-90deg) skew(0deg) scale(1);
-ms-transform:rotate(-90deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-90deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(-90deg) skew(0deg) scale(1);
animation:rotate_c3 10s linear infinite;
-webkit-animation:rotate_c3 10s linear infinite;
}
.r4{
transform:rotate(135deg) skew(0deg) scale(1);
-ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(135deg) skew(0deg) scale(1);
animation: rotatet 20s linear infinite;
-webkit-animation:rotatet 10s linear infinite;
-moz-animation:rotatet 10s linear infinite;
-o-animation:rotatet 10s linear infinite;
}
.r4 .img{
transform:rotate(-135deg) skew(0deg) scale(1);
-ms-transform:rotate(-135deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(-135deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(-135deg) skew(0deg) scale(1);
animation:rotate_c4 10s linear infinite;
-webkit-animation:rotate_c4 10s linear infinite;
}步骤三：为每个div创建动画

第一个div

@keyframes rotate{
0%{
transform:rotate(0deg) skew(0deg) scale(1);
-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(0deg) skew(0deg) scale(1);
}
100%{
transform:rotate(360deg) skew(0deg) scale(1);
-ms-transform:rotate(360deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(360deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(360deg) skew(0deg) scale(1);
}
} 第二个div

@keyframes rotatef{
0%{
transform:rotate(45deg) skew(0deg) scale(1);
-ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(45deg) skew(0deg) scale(1);
}
100%{
transform:rotate(405deg) skew(0deg) scale(1);
-ms-transform:rotate(405deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(405deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(405deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(405deg) skew(0deg) scale(1);
}
} 第三个div

@keyframes rotates{
0%{
transform:rotate(90deg) skew(0deg) scale(1);
-ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(90deg) skew(0deg) scale(1);
}
100%{
transform:rotate(450deg) skew(0deg) scale(1);
-ms-transform:rotate(450deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(450deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(450deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(450deg) skew(0deg) scale(1);
}
} 第四个div

@keyframes rotatet{
0%{
transform:rotate(135deg) skew(0deg) scale(1);
-ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(135deg) skew(0deg) scale(1);
}
100%{
transform:rotate(495deg) skew(0deg) scale(1);
-ms-transform:rotate(495deg) skew(0deg) scale(1); /* IE 9 */
-moz-transform:rotate(495deg) skew(0deg) scale(1); /* Firefox */
-webkit-transform:rotate(495deg) skew(0deg) scale(1); /* Safari ?? Chrome */
-o-transform:rotate(495deg) skew(0deg) scale(1);
}
}注意
因为css3的旋转属性并不是所有浏览器都可以兼容的，所以在创建完之后要给相应的类添加动画名。

web前端开发需要掌握哪些知识

1.HTML
知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签
2.CSS+布局
知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器
3.ECMA基础
知识要点：ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String
4.DOM
知识要点：DOM模型、节点类型、节点的基本操作、JS操作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和方法。
5.BOM+jQuery
知识要点：History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架
6.vue框架基本语法
知识要点：vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3
7.vue案例
知识要点：将知识点融会贯通到案例中。
8.react基本语法
知识要点：react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux
9.react案例
知识要点：将知识点融会贯通到案例中
新增内容：微信小程序及uni-app框架
知识要点：
小程序框架（配置/程序与页面注册/路由），开发者工具
小程序框架组件学习（基础/视图/表单/地图/媒体/导航/开发能力）
小程序框架组件学习（地图/媒体/导航/开发能力）
小程序API（基础/路由/界面/网络/数据缓存/位置服务）
小程序API（设备/媒体/开放接口/授权/登录/支付）
10.Node服务器与数据库及框架
Node原生模块、跨域、安全校验、数据加密、数据库基本操作、express框架、koa框架
11.Node 项目周/WebPack

以上就是关于web前端开发旋转的标签 web前端入门到实战：transform 变形的全部内容了，如果需要了解更多相关资讯敬请关注我爱编程网。