真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

css元素怎么旋轉(zhuǎn)

本篇內(nèi)容介紹了“css元素怎么旋轉(zhuǎn)”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、做網(wǎng)站、寶雞網(wǎng)絡(luò)推廣、重慶小程序開發(fā)公司、寶雞網(wǎng)絡(luò)營銷、寶雞企業(yè)策劃、寶雞品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供寶雞建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

在css中，可以利用transform屬性實現(xiàn)元素旋轉(zhuǎn)，當(dāng)值設(shè)置為“rotate(角度)”可實現(xiàn)2D旋轉(zhuǎn)；值為“rotateX(角度)”可沿著X軸旋轉(zhuǎn)，“rotateY(角度)”可沿著Y軸旋轉(zhuǎn)，“rotateZ(角度)”可沿著Z軸旋轉(zhuǎn)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。

Transform屬性有5個設(shè)置平移的屬性值：

rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。

代碼示例：

HTML代碼：

rotate(45deg)

rotateX(45deg)

rotateY(45deg)

rotateZ(45deg)

Perspective : 100

rotateX(90deg)

rotateY(45deg)

Perspective : 200

rotateX(90deg)

rotateY(45deg)

Transform origin

transform-origin : 100% 0 0
rotate(45deg)

transform-origin : 0 100% 0
rotate(45deg)

transform-origin : 0 100% 0
rotateX(45deg)

transform-origin : 100% 0 0
rotateX(45deg)

transform-origin : 0 100% 0
rotateY(45deg)

transform-origin : 100% 0 0
rotateY(45deg)

css代碼：

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

h2 {
  color: #4c4c4c;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}

h3, h5 {
  font-weight: 400;
  color: #4d4d4d;
}

.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 15px;
  min-width: 200px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 100px;
  height: 100px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 100px;
  height: 100px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}

.rotate:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rotateX:hover .fill {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

.rotateY:hover .fill {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

.rotateZ:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


.perspective-100 .box {
  -webkit-perspective: 100px;
  perspective: 100px;
}

.perspective-200 .box {
  -webkit-perspective: 200px;
  perspective: 200px;
}

.to-100-0-0 {
  -webkit-transform-origin: 100% 0 0;
          transform-origin: 100% 0 0;
}

.to-0-100-0 {
  -webkit-transform-origin: 0 100% 0;
          transform-origin: 0 100% 0;
}

css元素怎么旋轉(zhuǎn)