纯css实现正方体图片旋转效果

目标效果
基本思路
代码实现
主要困难

注意：（该代码暂未解决兼容性问题，在google浏览器中可顺利运行）

目标效果

鼠标移入之后，图片开始依次旋转平移，旋转平移完成后六面体开始旋转

基本思路

首先要为html添加上视距以保证z轴的平移
其次使用hover效果，利用transform实现翻转，利用transition过渡效果实现图片旋转平移，采用animutation实现动画的一直播放。
然后要体现“依次”，需在transition中加入延时效果
最后，需添加上transform-style为立方体添加上立体效果

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*添加视距*/html {perspective: 800px;}.cube {width: 200px;height: 200px;margin: 100px auto;/* 设置3d变形效果 */transform-style: preserve-3d;animation: rotate 20s 12s infinite linear;}.cube > div {width: 200px;height: 200px;/* 为元素设置透明效果 */opacity: 0.7;position: absolute;}img {/* 去除图片的基线 */vertical-align: text-top;}.box1 {transition: all 2S ;}.box2 {transition: all 2S 2s;}.box3 {transition: all 2S 4s;}.box4 {transition: all 2S 6s;}.box5 {transition: all 2S 8s;}.box6 {transition: all 2S 10s;}.cube:hover .box1 {transform: rotateY(90deg) translateZ(100px);}.cube:hover .box2 {transform: rotateY(-90deg) translateZ(100px);}.cube:hover .box3 {transform: rotateX(90deg) translateZ(100px);}.cube:hover .box4 {transform: rotateX(-90deg) translateZ(100px);}.cube:hover .box5 {transform: rotateY(180deg) translateZ(100px);}.cube:hover .box6 {transform: rotateY(0deg) translateZ(100px);}@keyframes rotate {from {transform: rotateX(0) rotateZ(0);}to {transform: rotateX(1turn) rotateZ(1turn);}}</style>
</head>
<body><!-- 创建1一个容器 --><div class="cube"><!-- 引入图片 --><div class="box1"><img src="./image/1.jpg" alt=""></div><div class="box2"><img src="./image/2.jpg" alt=""></div><div class="box3"><img src="./image/3.jpg" alt=""></div><div class="box4"><img src="./image/4.jpg" alt=""></div><div class="box5"><img src="./image/5.jpg" alt=""></div><div class="box6"><img src="./image/6.jpg" alt=""></div></div>
</body>
</html>

图片请网上自行下载，放在相应目录下即可

主要困难

博主作为初学者，这里提出自己制作时出现的一些困难，高手可直接略过。

最初博主采用的:hover效果后添加animutation放映动画的效果，运行起来可行，但当鼠标移开后，失去了过渡效果，直接停止播放，没有后来的图片一张张回到原始位置的效果。
第二点也是很多初学者会出现问题的点，transform属性的rotate进行旋转后，它原本多对应的坐标轴也会随之发生变化，例如transform: rotateY(90deg)后，他的x轴变为到原来的z轴的反向延长线，z轴变为原来的x轴，y轴不变，因此后来的平移translate都是围绕z轴平移，如果不理解可画图自己尝试。
第三点就是旋转的角度问题，这里博主用一个方法记忆，就是顺时针，不管是绕x，y，z轴旋转，只要是正值，都是顺时针，可自己手画圆圈尝试。
第四点就是借鉴了一位博主的延时效果，之前的动画效果（旋转平移）是所有图片同时进行，没有依次的感觉，需加上transition-delay来实现“依次”效果，也就是上一张图片翻转完后，下一张开始翻转，注意：这里不能同时旋转下面所有div同时设置，会失去延时效果。那位博主的文章链接地址：CSS3轻松实现彩色旋转六面体动画作者：夜色芜染

最后，推荐大家去看b站李立超老师的前端css教程b站李立超老师，这篇文章也是在老师的基础上稍微修改了一点。

纯css实现正方体图片旋转效果相关推荐

纯css实现给图片加标签
纯css实现给图片加标签原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播发布时间:2020-07-29 10:23:33 来源:亿速云阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
html 实现格子效果图,纯CSS实现动态图片的九宫格布局
起因最近碰到这样一个需求,要实现一个"九宫格图片"展示,设计师给过来的稿子是酱的是的,九宫格对应的是九种样式. 天不怕,地不怕,就怕设计有想法. 当一看到这样的需求,很多人的第 ...
html页面校园美景相框,纯CSS+HTML打造图片相框背景
通过纯html+css打造相框效果: 这是在页面上的效果传统的做法是使用背景图片的方式进行,下面是另类方法,亲测,兼容性还是很不错的: HTML代码: CSS部分: *{margin:0px;pad ...
html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
纯css hover放大图片
记录自己在工作中遇到的一些比较有意义的,值得去记一记的知识. 这次主要做的是css的hover效果,在所有的效果里,选择了放大,这个也是设计的要求,就做了这个其实这个要求来说,很简单,主要使用的是c ...
纯css实现背景图片半透明，内容不透明
前言最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示半透明不透明常见的失败做法最常见的做法事设置元素的opacity,这种设置出 ...
纯css svg 改变图片颜色 ios android 小程序
本文出自: http://blog.csdn.net/wyk304443164 使用的是 filter drop-shadow 如果你只想兼容 Chrome 那么请看: http://www.zhan ...

纯css实现正方体图片旋转效果

纯css实现正方体图片旋转效果

目标效果

基本思路

代码实现

主要困难

纯css实现正方体图片旋转效果相关推荐

最新文章

热门文章