css3 动画之 2D旋转 3D旋转放大

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css3实现 2D 3D 放大</title><style type="text/css">div {background: #000;color: #fff;width: 100px;height: 100px;margin: 50px;display: inline-block;}/*2D旋转*/._2D:hover  {-webkit-transition: all 0.5s ease-in-out;-webkit-transform: rotate(360deg); /*旋转度数自选，因为没有设定旋转次数为无限，所以当前动画只是旋转一次*/transition: all 0.8s ease-in-out;}/*3D旋转*/._3D:hover  {-webkit-transform:rotateY(360deg);/*rotateY()以y轴为旋转中心开始旋转*/transition: all 2s ease-in-out;}/*放大*/.larger:hover  {-webkit-transform: scale(1.2);/*scale()内的参数可以选择大于1或者小于1，用来放大或者缩小原DIV*/transition: all 0.8s ease-in-out;}</style>
</head><body><div class="_2D">2D旋转</div><div class="_3D">3D旋转</div><div class="larger">放大</div>
</body>
</html>

只是一个简单的鼠标悬浮产生的三种动画效果，分别是2D旋转、3D旋转、放大效果。

css3 动画之 2D旋转 3D旋转放大相关推荐

CSS3动画（2D，3D，自定义动画）
文章目录 css3过渡动画 1 css3动画之2D 1.1 transition过渡动画基础 1.1.1 实现缓入缓出或快入快出效果 1.1.2 实现一秒内变换宽度 1.1.3 实现一秒后变换宽度 1 ...
css3动画、2D与3D效果
1.兼容性 css3针对同一样式在不同浏览器的兼容需要在样式属性前加上内核前缀: 谷歌(chrome) -webkit-transition: Opera(欧鹏) -o-transition: ...
html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...
CSS3动画学习（过渡，旋转，缩小，倾斜）
CSS3动画学习(过渡,旋转,缩小,倾斜) 过渡transition perspective 透视设置元素被查看位置的视图过渡transition 为了添加某种效果可以从一种样式转变到另一个的时候 ...
css3中的2D和3D转换、动画效果以及布局
文章目录一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...
CSS3鼠标滑过图片3D旋转动画
在线演示本地下载
CSS3 -- API学习 (2D、3D动画效果)
一.2D效果 1.translate(xpx,ypx).translateX(xpx),translateY(ypx) 右平移xpx,左平移ypx <!DOCTYPE html&g ...
前端:使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等.它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感.所以说,为了让自己更加优秀,css3 ...
《前端实战总结》之使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等.它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感.所以说,为了让自己更加优秀,css3 ...

css3 动画之 2D旋转 3D旋转放大

css3 动画之 2D旋转 3D旋转放大相关推荐

最新文章

热门文章

css3 动画之 2D旋转 3D旋转 放大

css3 动画之 2D旋转 3D旋转 放大相关推荐

最新文章

热门文章

css3 动画之 2D旋转 3D旋转放大

css3 动画之 2D旋转 3D旋转放大相关推荐