CSS3 图片变形再旋转，旋转底盘效果

发现最近和图片样式杠上了。
需要图片可以在根据X轴变形之后仍然能够顺时针或者逆时针旋转。达到如下效果：

步入主题，其实上面就是一个图片旋转底图，然后用的第三方图表工具（highcharts）做的3D饼状图。下面记录下这个圆盘旋转实现步骤，其实很简单，当初想复杂了，还用了什么倾斜 scale 去实现其实用不到。

`1. html 结构`

<div class="imgWrap"><img src="test.png">
</div>

`2. css 样式`

首先，实现对图片的旋转：

@keyframes imgRotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}
}
img{width: 226px;height: 226px;display: block;margin: 100px auto;animation: imgRotate 5s infinite linear;
}

改变 imgRotate 从 0% 的 360° 就实现了逆时针旋转效果，之后，在实现对图片的变形。

.imgWrap{transform: rotateX(60deg);
}

这里犯过一个错误，仍然对img设置transform属性，但是按照x轴变形的效果不会生效，这是因为有了两个transform作用于一个标签。这时就可以将变形效果加在图片的父容器上面。

如果，将旋转动画加在父容器上面，变形样式放在img上面，则会出现下面的效果：

CSS3 图片变形再旋转，旋转底盘效果相关推荐

css3 图片旋转效果以y轴翻转效果等
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
html图片菱形,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
css3 实现盒子四周光晕_使用CSS3做出带有光晕流星旋转光环的效果 -
...章给大家带来的内容是关于CSS3属性:text-shadow文本阴影的使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.text-shadow还没有出现时,大家在网页设计中 ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
html圆点光晕特效,使用CSS3做出带有光晕流星旋转光环的效果
今天教大家的这一份代码是用CSS3做出带有光晕的流星旋转光环的效果,感兴趣的朋友可以自己动手实践一下,案列代码如下:html { width: 100%; height: 100%; } body { ...
css3transform rotate,CSS3详解：transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]...
CSS3详解:transform [旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix] transform的属性包括:rotate() / skew() ...
【转】CSS3 圆角阴影渐变透明旋转等功能详述
本文转载自yu0319@126<CSS3圆角阴影渐变透明旋转等功能详述> 随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上 ...
html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...

CSS3 图片变形再旋转，旋转底盘效果

`1. html 结构`

`2. css 样式`

CSS3 图片变形再旋转，旋转底盘效果相关推荐

最新文章

热门文章