css3样式实现正方体旋转效果

如视频的正方体

旋转正方体

css3实现这个正方体需要用到transform样式以及animation样式

具体结构：

<body><div class="father"><div class="one"><img src="D:/wallpaper/2020 五月/11_4k.jpg"></div><div class="two"><img src="D:/wallpaper/2020 五月/12_4k.jpg"></div><div class="three"><img src="D:/wallpaper/2020 五月/13_4k.jpg"></div><div class="four"><img src="D:/wallpaper/2020 五月/14_4k.jpg"></div><div class="five"><img src="D:/wallpaper/2020 五月/16_4k.jpg"></div><div class="six"><img src="D:/wallpaper/2020 五月/17_4k.jpg"></div></div>
</body>

具体思路：正方体有六个面，给一个父盒子，父盒子里给六个子盒子作为六个面，利用transform样式把六个面排成正方体，最后使用动画旋转父盒子即可。

父盒子样式：

<style>* {margin: 0;padding: 0;}body{perspective: 2000px;//给父盒子的父元素即body标签透视效果}.father {position: relative;width: 400px;height: 400px;margin: 200px auto;transform-style: preserve-3d;//使子元素以3D效果显示animation: fast 10s ease-in-out infinite;}
</style>

子盒子样式：

<style>//给子盒子公有样式，使用定位将子盒子定位在一起.father div {position: absolute;width: 400px;height: 400px;padding:31px;background-image:  linear-gradient(to right,#00aaf7,#6dcedf);}.father div img {width: 400px;height: 400px;}/*使用transform :translateZ将子盒子沿z轴平移一段距离后使用rotateX和rotateY将子盒子绕                    xy轴旋转成正方体的样子*/.father .one {transform:  rotateY(0deg) ;}.father .two {transform:  rotateY(90deg) translateZ(231px);}.father .three {transform:  rotateY(180deg) translateZ(231px);}.father .four {transform:  rotateY(270deg) translateZ(231px);}.father .five {transform:  rotateX(90deg)  translateZ(231px);}.father .six {transform:  rotateX(-90deg) translateZ(231px);}
</style>

最后父盒子调用动画即可:animation: fast 10s ease-in-out infinite;

动画样式：

<style>/* 定义动画 */@keyframes fast {0%{transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}
</style>

css3样式实现正方体旋转效果相关推荐

css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级一.总结一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
html和css哪个优先,CSS3 | 样式和优先级
css3一般介绍: CSS注释:/*CSS*/ CSS长度单位: 1.px(像素) 2.em(倍数,一般用于文字) 一.HTML嵌套CSS3样式: 1.外部(推荐) 例如HTML文件为index.ht ...
15种基础的可以直接使用的CSS3样式
15种基础的可以直接使用的CSS3样式本篇文章将列出一些基础简单的CSS3样式,你可以把它们放在手边,需要用的时候随时拿过来修改成自己的风格就可以使用.为了使我们得CSS3样式可以重复使用,我把它们 ...
几个常用的CSS3样式代码以及不兼容的解决办法
几个常用的CSS3样式代码以及不兼容的解决办法原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 1 CSS3代码: 2 3 -webkit-border- ...
制作导航栏并使用CSS美化,CSS3样式创建一个漂亮简洁的导航栏
本教程旨在教大家结合CSS3样式创建一个漂亮,简洁的导航栏.而在过去,我们只能借助图片,JavaScript和div层进行创作. 注意:下面所有的示例都是在Mozilla Firefox,Safari ...
CSS3样式设计-李强强-专题视频课程
CSS3样式设计-986人已学习课程介绍在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码做一些简单的修改,就 ...
[H5]CSS3样式(背景、文本、字体、链接、列表、表格和轮廓)
[H5]CSS3样式(背景.文本.字体.链接.列表.表格和轮廓) [index.html] <!DOCTYPE html> <html lang="en"> ...
微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients
线性渐变Linear Gradients 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 ...

css3样式实现正方体旋转效果

css3样式实现正方体旋转效果相关推荐

最新文章

热门文章