CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码。
效果图：
这是一个3D的立方体盒子 给盒子添加动画属性 使其可以转动。
原理： 原理其实很简单 我们看到的一个立方体其实就是靠六个平面搭建起来的
如图所示 ：六张正方形块堆叠在正中心位置 往前走边长的1半就形成了前面这一面 （1号） 往后走边长的一面也就是2号 往左走一半 然后再旋转90度 就形成了左侧的一面 依次类推六个面就组成了一个立方体
首先要给中心添加一个transform-style: preserve-3d;使其形成一个3D空间 再稍微转动一些角度 使我们能够更直观的看
然后根据原理让这些块搭成一个立方体 。给每个面添加 backface-visibility: hidden;属性使其背面不可见 。 可以在每一面的DIV里面添加内容和背景 让立方体看起来更加的炫酷！！！！！（图片 文字 符号 表情什么的 ） 嘿嘿
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>*{margin: 0;padding: 0;}.box{width: 400px;height: 400px;position: fixed;left:0;right:0;top:0;bottom:0;margin:auto;transform-style: preserve-3d;transform:rotateX(20deg) rotateY(20deg);animation: donghua 5s linear infinite;}.box:hover{animation-play-state: paused;}.box div{width: 400px;height: 400px;position: absolute;left: 0;top: 0;font-weight: bolder;font-size: 200px;text-align: center;line-height: 400px;color: black;backface-visibility: hidden;}.box1{opacity: 0.5;background: pink;transform: translateX(200px) rotateY(90deg);}.box2{opacity: 0.5;background: orange;transform: translateX(-200px) rotateY(-90deg);}.box3{opacity: 0.5;background: greenyellow;transform: translateY(-200px) rotateX(90deg);}.box4{opacity: 0.5;background: skyblue;transform: translateY(200px) rotateX(-90deg);}.box5{opacity: 0.5;background: wheat;transform: translateZ(200px);}.box6{opacity: 0.5;background: red;transform: translateZ(-200px) rotateX(180deg);}@keyframes donghua{0%{transform:rotateX(0deg) rotateY(0deg);}25%{transform: rotateX(90deg) rotateY(90deg);}50%{transform: rotateX(180deg) rotateY(180deg);}75%{transform: rotateX(270deg) rotateY(270deg);}100%{transform:rotateX(360deg) rotateY(360deg);}}
</style>
<body><div class="box"><div class="box1">
CSS3 3D旋转图片立方体特效相关推荐
- css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
- CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法 旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...
- 3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
- 图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
- HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...
- php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
- CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
- html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法 在页面中引 ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
最新文章
- ActiveMQ搭建
- SQL笛卡尔积结合前后行数据的统计案例
- python从多层循环嵌套中退出_python中退出多层循环的方法
- msys2安装gcc、g++编译器
- 手势UITapGestureRecognizer的tag
- 【记录】C++中的类成员调用
- java打印unicode_java程序实现Unicode码和中文互相转换
- python中下划线开头的命名_Python中 5 种不同的下划线含义你都知道吗？
- subgradients
- ES（ElasticSearch） 索引创建
- 15亿参数的NLP模型究竟有多强大？有人用它生成了一部《哈利·波特》
- 浅谈一下Program Files和Program Files（x86）
- 上古卷轴php代码,【上古卷轴五木柴代码】
- “蚂蚁呀嘿” 刷屏的背后：算法工程师带你理性解构神曲
- java获取时间（今天，昨天，上周第一天，本周第一天，本周最后一天）
- QQ登录的加密传输安全
- 产品狗观世界：谈装修
- 大数据平台的搭建教程及软件工具！
- Abaqus学习笔记
- 计算机网络工程专业毕业论文,网络工程参考文献
热门文章