CSS3 3D位移和旋转

transform-style：preserve-3d 设定父元素为一个3d空间

小例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}section{width: 500px;height: 300px;background: orange;margin: 100px auto;/* 设置父元素为3d空间，3d的舞台 */transform-style: preserve-3d;transform: rotateY(30deg);}div{width: 30px;height: 100px;background: red;transform: translateZ(200px);transition: 1s;}/* 测试 */section:hover div{transform: rotateX(50deg);}</style></head><body><section><div></div></section></body>
</html>

基本不会使用。

CSS3 3D位移和旋转相关推荐

CSS3通过3D变换立体旋转相册
图片镇楼: 声明:本来想做一个多面体相册的,但是在网上没有找到例子,最终完整代码是在一个英文程序网站上copy的,但是没有解释,我把大体实现流程解释了一遍,旋转真的是绕蒙我了···· 代码: < ...
CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
一步一步来制作CSS3 3D旋转相册
body 内添加如下代码,结构:舞台,容器,图片内容 <div class="stage-area"><div class="container&quo ...
CSS：3D效果（位移、旋转）
浏览器平面为二维平面,以浏览器可视区域左上角为原点,X轴为左上到右上,正方向为右:Y轴为左上到左下,正方向为下. 要想实现3D效果,我们需要引入Z轴,这条Z轴垂直于屏幕,以出平面为正方向. trans ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...

CSS3 3D位移和旋转

CSS3 3D位移和旋转相关推荐

最新文章

热门文章