transform动画

CSS3中引入的

2D变化

2D的transform应用在x和y轴上，而3D的则多了一条z轴。

transform属性可以让元素实现变形，旋转，缩放等视觉效果。

2. Scale缩放

.box {transform: rotate(20deg); //顺时针
}
.box2 {transform: rotate(-20deg); //逆时针
}

.box {transform: scale(.5); //缩小为原来的一半
}.box2 {transform: scale(2); //放大为原来的两倍
}

你也可以只针对宽度或者高度进行缩放操作。

.box {transform: scaleX(2); //将宽度变为原来的两倍
}.box2 {transform: scaleY(.25); //将高度变为原来的25%
}

3. Skew 倾斜

.box {transform: skewX(-5deg); //X轴顺时针旋转5度
}.box1 {transform: skewY(20deg); //Y轴逆时针旋转20度
}.box3 {transform: skew(-5deg, 20deg); //同时作用在X和Y轴上
}

4. Translate 平移

.box {transform: translateX(-10px); //在横轴上向左平移10个像素点
}.box2 {transform: translateY(20%); //在Y轴上向下平移其自身高度的20%
}.box3 {transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
}

实例动画：

X轴:水平向右，X右边是正值，左边是负值。

Y轴:垂直向下，Y下面是正值,上面是负值。

Z轴:垂直屏幕，往外面是正值,往里面是负值。

通过CSS transform属性,你可以使用以下3D转换方法:

rotateX()

rotateY()

rotateZ()

<style type="text/css">.main{width: 300px;height: 300px;position: absolute;left: 400px;top: 300px;}.main::after{content: "";width: 200px;height: 200px;background: linear-gradient(90deg, yellow,pink,rgb(20, 188, 255));border-radius: 50%;position: absolute;transform: translate(-50%,-50%);top: 18%;left: 18%;transition: 1.5s;transform: scale(1);}.main div{background: linear-gradient(45deg, yellow,pink,rgb(20, 188, 255));width: 100px;height: 20px;background-color: red;border-radius: 70%;position: absolute;top: 0px;left: 0px;transition: 1.5s;transform-origin: 150px 150px;transform: scale(0);}.main:hover::after{transform: scale(.8);}.main:hover div:nth-child(1){transform: scale(1) rotate(40deg);}.main:hover div:nth-child(2){transform: scale(1) rotate(80deg);}.main:hover div:nth-child(3){transform: scale(1) rotate(120deg);}.main:hover div:nth-child(4){transform: scale(1) rotate(160deg);}.main:hover div:nth-child(5){transform: scale(1) rotate(200deg);}.main:hover div:nth-child(6){transform: scale(1) rotate(240deg);}.main:hover div:nth-child(7){transform: scale(1) rotate(280deg);}.main:hover div:nth-child(8){transform: scale(1) rotate(320deg);}.main:hover div:nth-child(9){transform: scale(1) rotate(360deg);}</style>

 <div class="main"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

效果：

3D变化

3D是以2D变化为基础的，只是增加了一个z轴。这条z轴是可以看做一个虚拟垂直与屏幕的坐标轴，它代表在元素的远近距离。其中正值代表离屏幕越近，负值代表离屏幕越远。

css：

<style>body{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.div{margin-top: 200px;width: 150px;height: 150px;position: relative;animation: rate 5s linear infinite;transform-style: preserve-3d;}.div div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;}.div div:nth-child(1){transform: translateZ(75px);}.div div:nth-child(2){transform:rotateY(90deg) translateZ(75px);}.div div:nth-child(3){transform:rotateY(180deg) translateZ(75px);}.div div:nth-child(4){transform:rotateY(-90deg) translateZ(75px);}.div div:nth-child(5){transform:rotateX(90deg) translateZ(75px);}.div div:nth-child(6){transform:rotateX(-90deg) translateZ(75px);}@keyframes rate {from{transform: rotateY(0) rotateX(0);}to{transform: rotateY(360deg) rotateX(360deg);}}</style>

<div class="div"><div class="div1"><img src="data:images/1.jpg" alt=""></div><div class="div1"><img src="data:images/2.jpg" alt=""></div><div class="div1"><img src="data:images/3.jpg" alt=""></div><div class="div1"><img src="data:images/4.jpg" alt=""></div><div class="div1"><img src="data:images/5.jpg" alt=""></div><div class="div1"><img src="data:images/6.jpg" alt=""></div></div>

效果：

transform动画相关推荐

html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画鼠标悬停 div容器凸起放大显示.鼠标悬停div容器凸起放大显示效果代码结构 1. HTML代码 what? If you want to sell s ...
CSS3 transform动画 3D旋转立体正方形
CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYP ...
transform 动画效果
http://www.css88.com/tool/css3Preview/Transform.html transform的含义是:改变,使-变形:转换 transform的属性包括:rotate( ...
高性能Web动画和渲染原理系列（3）——transform和opacity为什么高性能
[摘要] 研究Web高性能动画及原理示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录关于opa ...
iOS 开发之动画篇 - Transform和KeyFrame动画
原文发布于http://www.jianshu.com/p/a071bba99a1b 序言追求美好是人的天性,这是猿们无法避免的.我们总是追求更为酷炫的实现,如果足够仔细,我们不难发现一个好的动画通 ...
transform总结
1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值, 优先使用dom.style.webKitTransform进行transform的读 ...
【动画1】UIView动画
讲一下动画.将分为以下5篇博客. 一)UIView动画二)Layer动画三)3D动画四)转场动画五)第三方动画框架相关代码:https://github.com/dolacmeng/Anim ...
android 属性动画弧形,CSS分层动画可以让元素沿弧形路径运动
CSS 的 animations (动画) 和 transitions(变换)擅于实现从点 A 到点 B 的直线运动,运动轨迹是直线路径.给一个元素添加了 animation 或者 transitio ...
iOS开发CoreAnimation解读之四——Layer层动画内容
iOS开发CoreAnimation解读之四--Layer层动画内容一.引言通过前几篇博客的介绍,我们可以了解到layer层可以设置许多与控件UI相关的属性,并且对于iOS开发,UIView层的属 ...

transform动画

2D变化

实例动画：

3D变化

transform动画相关推荐

最新文章

热门文章