javascript - 圆的旋转功效-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 圆的旋转功效

高洛峰 2017-04-11 11:32:46

[JavaScript讨论组]

712

最近项目中有个圆的旋转功效；也就是这个圆有两个面一个前面和背面；是竖立旋转的那种；旋转180度可以前面变成背面；背面变成前面；有没有做过的朋友给点思路；这里我要的是加载页面时候能够自动旋转不是翻牌的效果

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(3)

ringa_lee2017-04-11 11:34:46 3楼

翻牌效果，一搜一大堆

赞 +0

添加回复

PHP中文网2017-04-11 11:34:46 2楼

<p class='rotate'>
      <p class='front'></p>
      <p class='behand'></p>
</p>

.rotate{
  position: relative;
  -webkit-perspective:500px;
}
.front,.behand {
  width: 100px;
  height: 100px;
  border-radius:100px;
  position: absolute;
  transition:all 0.8s ease;
}
.front {
  z-index:1;
  background-color: red; 
  transform: rotateY(0deg);
}
.behand{
  background-color: yellow;
}
.rotate:hover .front{
  z-index: 0;
  transform: rotateY(180deg);
}
.rotate:hover .behand{
  transform: rotateY(180deg);
}

没写兼容性。

赞 +0

添加回复

高洛峰2017-04-11 11:34:46 1楼

transform:rotate 是这个吗？还是什么样子的？

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>